@aleph-us/header-components/lib/src/components/useIdle.js

React header component

import { useEffect, useState } from "react";
export default function useIdle(ms) {
    const [idle, setIdle] = useState(false);
    useEffect(() => {
        let timeoutId;
        const handleTimeout = () => {
            setIdle(true);
        };
        const handleEvent = throttle(() => {
            setIdle(false);
            clearTimeout(timeoutId);
            timeoutId = setTimeout(handleTimeout, ms);
        }, 500);
        if (!ms) {
            return;
        }
        timeoutId = setTimeout(handleTimeout, ms);
        window.addEventListener("mousemove", handleEvent);
        window.addEventListener("mousedown", handleEvent);
        window.addEventListener("resize", handleEvent);
        window.addEventListener("keydown", handleEvent);
        window.addEventListener("touchstart", handleEvent);
        window.addEventListener("wheel", handleEvent);
        return () => {
            window.removeEventListener("mousemove", handleEvent);
            window.removeEventListener("mousedown", handleEvent);
            window.removeEventListener("resize", handleEvent);
            window.removeEventListener("keydown", handleEvent);
            window.removeEventListener("touchstart", handleEvent);
            window.removeEventListener("wheel", handleEvent);
            window.clearTimeout(timeoutId);
        };
    }, [ms]);
    return idle;
}
function throttle(cb, ms) {
    let lastTime = 0;
    return () => {
        const now = Date.now();
        if (now - lastTime >= ms) {
            cb();
            lastTime = now;
        }
    };
}