@re-flex/ui/hooks/useTransition.js

Re-Flex ui library

import { useCallback, useEffect, useState } from "react";
const useTransition = (enable, duration) => {
    const [status, setStatus] = useState(enable ? "entered" : "exited");
    const setWaitWithChangeStatus = useCallback((newStatus) => {
        return new Promise((resolve) => {
            setStatus(newStatus);
            let timer = setTimeout(() => {
                clearTimeout(timer);
                resolve(newStatus);
            }, duration);
        });
    }, [enable, duration]);
    useEffect(() => {
        if (enable) {
            if (["entering", "entered"].includes(status) === false) {
                setWaitWithChangeStatus("entering").then(() => {
                    setStatus("entered");
                });
            }
        }
        else {
            if (["exiting", "exited"].includes(status) === false) {
                setWaitWithChangeStatus("exiting").then(() => {
                    setStatus("exited");
                });
            }
        }
    }, [enable]);
    return status;
};
export default useTransition;