1import { useState, useEffect } from "react";
2
3export function useIdle(ms: number = 3000) {
4 const [idle, setIdle] = useState(false);
5
6 useEffect(() => {
7 let timeoutId: number;
8
9 const handleActivity = () => {
10 setIdle(false);
11 window.clearTimeout(timeoutId);
12 timeoutId = window.setTimeout(() => setIdle(true), ms);
13 };
14
15 const events = ["mousemove", "mousedown", "keypress", "DOMMouseScroll", "mousewheel", "touchmove", "MSPointerMove"];
16
17 events.forEach((event) => {
18 window.addEventListener(event, handleActivity);
19 });
20
21 timeoutId = window.setTimeout(() => setIdle(true), ms);
22
23 return () => {
24 events.forEach((event) => {
25 window.removeEventListener(event, handleActivity);
26 });
27 window.clearTimeout(timeoutId);
28 };
29 }, [ms]);
30
31 return idle;
32}