useIdle Hook
A custom React Hook to detect user idle/inactivity with TypeScript support
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]);