dom

useIdle

Detecta cuando el usuario lleva cierto tiempo inactivo (sin mover el ratón, escribir o hacer scroll). Útil para mostrar screensavers, cerrar sesiones o pausar animaciones.

useIdle.ts

import { useState, useEffect, useCallback, useRef } from "react"

export function useIdle(timeout: number = 3000): boolean {
  const [isIdle, setIsIdle] = useState(false)
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)

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

  useEffect(() => {
    const events = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"]

    events.forEach((event) => window.addEventListener(event, resetTimer))
    resetTimer()

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

  return isIdle
}

¿Fue útil?

Inicia sesión para dar feedback

Buscar

useIdle