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 |