react-decode-animation/dist/esm/hooks/useDecodeAnimation.js

Decode effect typing animation for React

import { useEffect, useState } from "react";
const useDecodeAnimation = ({ value, interval, onFinish, }) => {
    const [decodeState, setDecodeState] = useState("Reset");
    const [text, setText] = useState("");
    const [index, setIndex] = useState(0);
    let intervalId;
    const play = () => {
        intervalId = setInterval(() => {
            setIndex((prevousState) => {
                if (prevousState >= value.length) {
                    pause();
                    setDecodeState("Paused");
                    return prevousState;
                }
                return ++prevousState;
            });
        }, interval);
    };
    const pause = () => {
        clearInterval(intervalId);
    };
    const reset = () => {
        clearInterval(intervalId);
        setIndex(0);
        setText("");
    };
    useEffect(() => {
        if (decodeState === "Playing") {
            setText((prevousState) => prevousState += value[index - 1]);
        }
        if (index >= value.length && onFinish)
            onFinish();
    }, [index]);
    useEffect(() => {
        switch (decodeState) {
            case "Playing":
                play();
                break;
            case "Paused":
                pause();
                break;
            default:
                reset();
                break;
        }
        return () => {
            clearInterval(intervalId);
        };
    }, [decodeState]);
    return {
        text,
        currentIndex: index,
        state: decodeState,
        play: () => setDecodeState("Playing"),
        pause: () => setDecodeState("Paused"),
        reset: () => setDecodeState("Reset"),
    };
};
export default useDecodeAnimation;
//# sourceMappingURL=useDecodeAnimation.js.map