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

Prop name	Type	Description	Required	Default
text	string | string[]	Text to display as string or an array of strings	true
speed	number	How long (in ms) does the the typewriter wait after typing one character	false	30ms
loop	boolean	Set to true if the typewriter should loop after finishing typing the string(s)	false	false
random	number	Ms of randomness that should be added after each keystroke. If set to zero then each stroke will strictly take speedms to complete	false	30ms
delay	number	Ms to wait after compleating the word. Useless if loop is set to false or text is not an array	false	30ms
cursor	boolean	Set to false if the typewriter should not render a blinking cursor character at the end of the string	false	true
onFinished	Function	Callback function after Typewriter animation is complete, never triggers if loop is true	false	() => void
onStart	Function	Callback function before Typewriter animation is started on each string	false	() => void