Use-typer NPM | npm.io

react-use-typer

demo

Install

npm install --save use-typer

Usage

import React from "react";
import useTyper from "use-typer";

const MyComponent = () => {
    const myAnimatedText = useTyper(
        ["First words.", "Second words.", "third words", "..."],
        {
            typeSpeed: 20,
            eraseSpeed: 50,
            typeDelay: 1000,
            eraseDelay: 1000,
            once: false
        }
    );
    return <div>{myAnimatedText}</div>;
};

or if you prefer:

const MyComponent = () => {
    const myAnimatedText = useTyper("Single sentence or word", {
        ...my optional options,
        once: true, // Prevent loop.
        once: false // Will loop.
    });
    return <div>{myAnimatedText}</div>;
};

Options

Name	Type	Default value	Is Required	Description
...	Array of string		Yes	An array or a string of words you want to be displayed.
{ ... }	Object	{}	Yes	Typing options, can be empty but required.
typeSpeed	Number (ms)	100	No	Speed at which letters will be typed.
eraseSpeed	Number (ms)	50	No	Speed at which letters will be erased.
typeDelay	Number (ms)	1000	No	Delay between words before begins typing.
eraseDelay	Number (ms)	1000	No	Delay between words before begins erasing.
once	boolean	false	No	If true the string or the first word in the array will be typed once.