UseIdle

1'use client';
2 
3import { useCallback, useEffect, useRef, useState } from 'react';
4 
5const DEFAULT_EVENTS = [
6  'keydown',
7  'mousemove',
8  'touchmove',
9  'click',
10  'scroll',
11  'wheel',
12] as const;
13 
14interface UseIdleOptions {
15  events?: ReadonlyArray<(typeof DEFAULT_EVENTS)[number]>;
16  initialState?: boolean;
17}
18 
19export function useIdle(
20  timeout: number = 1000,
21  options?: UseIdleOptions,
22): [boolean, () => void] {
23  const { events = DEFAULT_EVENTS, initialState = true } = options || {};
24  const [idle, setIdle] = useState<boolean>(initialState);
25  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
26 
27  const reset = useCallback(() => {
28    if (!idle) return; // No need to reset if already idle
29    setIdle(false);
30    if (timer.current) {
31      clearTimeout(timer.current);
32    }
33    timer.current = setTimeout(() => {
34      setIdle(true);
35    }, timeout);
36  }, [timeout, idle]);
37 
38  useEffect(() => {
39    // Stable handler for listeners
40    const handleEvents = () => {
41      if (!idle) {
42        // Only reset the timer, don't setIdle(false) if already active
43        if (timer.current) {
44          clearTimeout(timer.current);
45        }
46        timer.current = setTimeout(() => {
47          setIdle(true);
48        }, timeout);
49        return;
50      }
51      setIdle(false);
52      if (timer.current) {
53        clearTimeout(timer.current);
54      }
55      timer.current = setTimeout(() => {
56        setIdle(true);
57      }, timeout);
58    };
59 
60    events.forEach((event) => document.addEventListener(event, handleEvents));
61 
62    // Initialize timer
63    if (timer.current) {
64      clearTimeout(timer.current);
65    }
66    timer.current = setTimeout(() => {
67      setIdle(true);
68    }, timeout);
69 
70    return () => {
71      events.forEach((event) =>
72        document.removeEventListener(event, handleEvents),
73      );
74      if (timer.current) {
75        clearTimeout(timer.current);
76      }
77    };
78  }, [timeout, events.join(','), idle]);
79 
80  return [idle, reset];
81}