react-typewriting
v2.2.0
Published
React component for creating highly customizable typewriting effects.
Downloads
142
Maintainers
Readme
React component for creating customizable typewriting visualizations
Usage
import { Typewriting } from 'react-typewriting'
interface TypewritingRenderArgs {
currentText: string
fullCurrentText: string
}
<Typewriting
strings={[
'Sign up today!',
'Receive 20% off on your first purchase!',
]}
>
{({ currentText, fullCurrentText }: TypewritingRenderArgs) => (
<h1 aria-label={fullCurrentText}>{currentText}</h1>
)}
</Typewriting>
Installation
$ npm install react-typewriting
# or
$ yarn add react-typewriting
Props
strings
| Array<string>
| required
The strings to print out, in order of appearance.
children
| ({ currentText: string, fullCurrentText: string }) => ReactNode
| required
The child render prop.
currentText
holds the latest, sliced, version of the current stringfullCurrentText
holds the full value of the current string
waitBeforeDeleteMs
| number
| default: 9000
Amount of milliseconds strings will be fully readable before starting to delete the string.
writeSpeedMs
| number
or [number, number]
| default: 100
This prop controls the speed at which the strings are built.
If provided a number
, this number will be the longest time to wait between writing characters.
If provided a [number, number]
tuple, a number between these two values will be the longest time to wait between writing characters.
deleteSpeedMs
| number
or [number, number]
| default: 60
Same as writeSpeedMs
(see above), but for when deleting characters.
License
Licensed under the MIT license.
Authors
William Boman [email protected]