〰 ⌨️ 〰 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

npm i react-ts-typewriter

Example usage

import Typewriter from 'react-ts-typewriter';

export default function myComponent() {
    return (
        <h1>
            <Typewriter text='Hello' />
        </h1>
    )
}

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.

GitHub

View Github