The simplest typewriter effect component in React. ( Requires react >=16.8.0 )
- cursor option to add custom cursor text
- cursor css can be customised using cursorClassName
npm install --save react-typewriting-effect
import React from 'react'
import { Typewriter } from 'react-typewriting-effect'
import 'react-typewriting-effect/dist/index.css'
const App = () => {
return <Typewriter string='This is an example of typewriting 😄' delay={80} />
}
export default App
import React from 'react'
import { Typewriter } from 'react-typewriting-effect'
import 'react-typewriting-effect/dist/index.css'
const App = () => {
return (
<Typewriter
string='In this example, the cursor will stop blinking after ther string is completely rendered'
delay={80}
stopBlinkinOnComplete
/>
)
}
export default App
import React from 'react'
import { Typewriter } from 'react-typewriting-effect'
import 'react-typewriting-effect/dist/index.css'
const App = () => {
return (
<Typewriter
string='In this example, the cursor will be _ and speed will be 50'
delay={50}
cursor='_'
/>
)
}
export default App
You can view demo here
Name | Type | Default value | Description |
---|---|---|---|
string | String | String to type out | |
delay (speed in v1.0.3) | number | 100 | The delay between each key when typing. |
onComplete | Lambda/Function | () => {} | Function to execute when string is completely typed |
stopBlinkinOnComplete | Boolean | false | Whether to blink cursor after string is typed |
className | String | '' | Field to set classes for the HTML Element |
cursor | String | ' | ' |
cursorClassName | String | undefined | Field to set classes for the cursor |
MIT © tanmaylaud