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

Decode effect typing animation for React

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
const useDecodeAnimation = ({ value, interval, onFinish, }) => {
    const [decodeState, setDecodeState] = (0, react_1.useState)("Reset");
    const [text, setText] = (0, react_1.useState)("");
    const [index, setIndex] = (0, react_1.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("");
    };
    (0, react_1.useEffect)(() => {
        if (decodeState === "Playing") {
            setText((prevousState) => prevousState += value[index - 1]);
        }
        if (index >= value.length && onFinish)
            onFinish();
    }, [index]);
    (0, react_1.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"),
    };
};
exports.default = useDecodeAnimation;
//# sourceMappingURL=useDecodeAnimation.js.map