〰 ⌨️ 〰 React Typewriter 〰 ⌨️ 〰

React Typewriter is a simple component that allows you to create a nice "typewriter" effect to any text by simply invoking the component. Try on codesandbox.io.

Installation

``sh
npm i react-ts-typewriter
`

Example usage

`tsx
import Typewriter from 'react-ts-typewriter';

export default function myComponent() {
return (







)
}
``

Props

> text : string | string[]

Text to display as string or an array of strings. Required

> speed?: number = 30

How long (in ms) does the the typewriter wait after typing one character. Defaults to 30ms.

> loop?: boolean = false

Set to true if the typewriter should loop after finishing typing the string(s). Defaults to false.

> random?: number = 30

Ms of randomness that should be added after each keystroke. If set to zero then each stroke will strictly take speedms to complete. Defaults to 30ms.

> delay?: number = 30

Ms to wait after compleating the word. Useless if loop is set to false or text is not an array. Defaults to 30ms.

> cursor?: boolean = true

Set to false if the typewriter should not render a blinking cursor character at the end of the string. Defaults to true

> onFinished?: Function = () => void

Callback function after Typewriter animation is complete, never triggers if loop is true. Defaults to () => void

> onStart?: Function = () => void

Callback function before Typewriter animation is started on each string. Defaults to () => void.