typescriptintermediate

useIdleDetection Hook

Detects user inactivity after a configurable timeout by monitoring mouse, keyboard, and touch events.

typescriptPress ⌘/Ctrl + Shift + C to copy

import { useState, useEffect, useRef, useCallback } from 'react';

export function useIdleDetection(timeoutMs = 300_000) {
  const [isIdle, setIsIdle] = useState(false);
  const timerRef = useRef<ReturnType<typeof setTimeout>>();

  const resetTimer = useCallback(() => {
    setIsIdle(false);
    if (timerRef.current) clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => setIsIdle(true), timeoutMs);
  }, [timeoutMs]);

  useEffect(() => {
    const events = ['mousemove', 'keydown', 'touchstart', 'scroll'] as const;
    events.forEach(e => window.addEventListener(e, resetTimer, { passive: true }));
    resetTimer();

    return () => {
      events.forEach(e => window.removeEventListener(e, resetTimer));
      if (timerRef.current) clearTimeout(timerRef.current);
    };
  }, [resetTimer]);

  return isIdle;
}