Skip to content

Easy to use typewriter component written with Typescript and React 18+ in mind

License

Notifications You must be signed in to change notification settings

gerardmarquinarubio/ReactTypewriter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

40 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

〰 ⌨️ 〰 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 nameTypeDescriptionRequiredDefault
textstring | string[]Text to display as string or an array of stringstrue
speednumberHow long (in ms) does the the typewriter wait after typing one characterfalse30ms
loopbooleanSet to true if the typewriter should loop after finishing typing the string(s)falsefalse
randomnumberMs of randomness that should be added after each keystroke. If set to zero then each stroke will strictly take speedms to completefalse30ms
delaynumberMs to wait after compleating the word. Useless if loop is set to false or text is not an arrayfalse30ms
cursorbooleanSet to false if the typewriter should not render a blinking cursor character at the end of the stringfalsetrue
onFinishedFunctionCallback function after Typewriter animation is complete, never triggers if loop is truefalse() => void
onStartFunctionCallback function before Typewriter animation is started on each stringfalse() => void