react-typewriter

React hooks for typewriter text animation effects.

Install

npm install @ancientbag/react-typewriter

useTypewriter

Animates a single string.

import { useTypewriter } from "@ancientbag/react-typewriter";

function App() {
    const { ref, isFinished, restart } = useTypewriter("Hello, world!", {
        delay: 100,
        autoStart: true,
    });

    return (
        <>
            <h1 ref={ref} />
            {isFinished && (
                <button type="button" onClick={restart}>
                    Replay
                </button>
            )}
        </>
    );
}

Options

| Option | Type | Default | Description | | ----------- | --------- | ------- | ------------------------ | | delay | number | 100 | ms between each char | | autoStart | boolean | true | start animating on mount |

Returns

| Field | Type | Description | | ------------ | -------------- | ------------------------------- | | ref | RefObject<T> | attach to any HTML element | | start | () => void | start typing from the beginning | | restart | () => void | cancel and restart typing | | pause | () => void | pause typing | | resume | () => void | resume typing after pause | | isFinished | boolean | true when animation completes |

useSmartTypewriter

Animates multiple sentences with per-sentence and per-letter delays.

import { useSmartTypewriter } from "@ancientbag/react-typewriter";

function App() {
    const { ref, isFinished, restart } = useSmartTypewriter({
        sentences: [
            { text: "Hello!", delay: 80 },
            { text: "How are you?", delayByLetter: { " ": 300 } },
        ],
        sentenceDelay: 500,
    });

    return (
        <>
            <h1 ref={ref} />
            {isFinished && (
                <button type="button" onClick={restart}>
                    Replay
                </button>
            )}
        </>
    );
}

Options

| Option | Type | Default | Description | | --------------- | ------------- | ------- | --------------------------------------- | | sentences | TSentence[] | — | sentences to type (required) | | sentenceDelay | number | 300 | ms delay before starting a new sentence | | autoStart | boolean | true | start animating on mount | | onFinish | () => void | — | called when all sentences finish typing |

Sentence object

| Field | Type | Description | | ---------------- | ------------------------ | --------------------------------- | | text | string | the sentence to type | | delay? | number | ms between chars (default 100) | | delayByLetter? | Record<string, number> | override delay for specific chars |

Returns

| Field | Type | Description | | ------------ | -------------- | ------------------------------- | | ref | RefObject<T> | attach to any HTML element | | start | () => void | start typing from the beginning | | restart | () => void | cancel and restart typing | | pause | () => void | pause typing | | resume | () => void | resume typing after pause | | isFinished | boolean | true when animation completes |

License

MIT