Programming language: TypeScript
License: BSD 3-clause "New" or "Revised" License
Tags: UI Animation    

react-ts-typewriter alternatives and similar libraries

Based on the "UI Animation" category.
Alternatively, view ReactTypewriter alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-ts-typewriter or a related project?

Add another 'UI Animation' Library

README

React Typewriter

https://github.com/gerardmarquinarubio/ReactTypewriter/releases/tag/0.1.6 https://www.npmjs.com/package/react-ts-typewriter

React Typewriter is a simple component that allows you to create a nice "typewriter" effect to any text by simply invoking the component. Take a look in NPM.

Installation

npm i react-ts-typewriter

Example usage

import Typewriter from 'react-ts-typewriter';

export default function myComponent() {
    return (
        <h1>
            <Typewriter text='Hello' />
        </h1>
    )
}
import Typewriter from 'react-ts-typewriter';

export default function myComponent() {
    return (
        <h1>
            <Typewriter 
            text={['Hello', 'how', 'are', 'you?']}
            delay={500}
            loop={false} 
            />
        </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 word(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