REACT

useIdle Hook

A custom React Hook to detect user idle/inactivity with TypeScript support

ReactHooksUserActivityEventsUI

Code

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

function useIdle(
  timeout = 30000, // 30 seconds default
  events: string[] = ['mousemove', 'keydown', 'mousedown', 'touchstart', 'scroll']
): boolean {
  const [isIdle, setIsIdle] = useState(false);
  const timerRef = useRef<NodeJS.Timeout | null>(null);

  const resetTimer = () => {
    __TOKEN_24__ (timerRef.current) clearTimeout(timerRef.current);
    setIsIdle(false);
    timerRef.current = setTimeout(() => {
      setIsIdle(true);
    }, timeout);
  };

  useEffect(() => {
    // Initial timer
    resetTimer();

    // Add event listeners
    events.forEach(event => {
      window.addEventListener(event, resetTimer, { passive: true });
    });

    __TOKEN_25__ () => {
      // Cleanup
      __TOKEN_26__ (timerRef.current) clearTimeout(timerRef.current);
      events.forEach(event => {
        window.removeEventListener(event, resetTimer);
      });
    };
  }, [timeout, events]);

  return isIdle;
}

// Usage example
// const isUserIdle = useIdle(60000); // 1 minute
// useEffect(() => {
//   if (isUserIdle) {
//     console.log('User is idle!');
//     // Show timeout modal, pause video, etc.
//   }
// }, [isUserIdle]);