A React component for creating a typewriter effect with customizable options.
Click here for a live demo.
- Install '@reusable-ui-tr/react-type-writer-effect' with npm
npm i @reusable-ui-tr/react-type-writer-effect
- Import TypeWriterEffect component in your react component
import TypeWriterEffect from "@reusable-ui-tr/react-type-writer-effect";- Use 'TypeWriterEffect' component
<TypeWriterEffect
blinkDuration="2s"
cursorColor="blue"
fontFamily="Lucida Console"
fontSize="20px"
highlightColor="green"
text="Hello World!"
textColor="white"
textWrapperElementType="p"
typingSpeed="slow"
/>| Property Name | Property Type | Usage | Default Value | Required |
|---|---|---|---|---|
| blinkDuration | String | Blink duration of typewriter effect in seconds or milliseconds (Example values: '1s', '10ms' etc.) | '1s' | no |
| cursorColor | String | All CSS legal color values are supported. (Example values: '#00ff00', #00ff0080, rgb(0, 255, 0), rgba(0, 255, 0, 0.3), hsl(120, 60%, 70%), hsla(120, 60%, 70%, 0.3), 'green' etc.) | 'black' | no |
| fontFamily | String | Font family of the text | 'Roboto, Arial, sans-serif' | no |
| fontSize | String | Font size of the text | '16px' | no |
| highlightColor | String | Highlight color of the text | 'transparent' | no |
| text | String | Content of the text | none | yes |
| textColor | String | All CSS legal color values are supported. (Example values: '#00ff00', #00ff0080, rgb(0, 255, 0), rgba(0, 255, 0, 0.3), hsl(120, 60%, 70%), hsla(120, 60%, 70%, 0.3), 'green' etc.) | 'black' | no |
| textWrapperElementType | String | Type of HTML element to wrap text (All HTML elements are valid) | 'code' | no |
| typingSpeed | String | Typing speed of typewriter effect (Only following keywords are valid: 'slowest', 'slow', normal', 'fast', 'fastest') | 'normal' | no |