useIdle

Tracks the idle state of an user.

Installation

npx rabbithook@latest add use-idle

Usage

App.tsx

import useIdle from "@/hooks/use-idle";

function Component() {
  const isIdle = useIdle(15 * 1000 /* 15 seconds */);

  return (
    <div>isIdle: { isIdle ? "Yes" : "No" }</div>
  )
}

Code

Typescript

use-idle.ts

import { useRef, useState } from "react";
import useEventListener from "../use-event-listener";

function useIdle(delay: number) {
  const idleTimeout = useRef<NodeJS.Timeout | null>(null);

  const [isIdle, setIsIdle] = useState(false);

  function handleMouseMove() {
    setIsIdle(false);

    if (idleTimeout.current) {
      clearTimeout(idleTimeout.current);
    }

    idleTimeout.current = setTimeout(() => {
      setIsIdle(true);
    }, delay);
  }

  useEventListener("mousemove", handleMouseMove);

  return isIdle;
}

export default useIdle;

Javascript

use-idle.js

// @ts-nocheck
import { useRef, useState } from "react";
import useEventListener from "../use-event-listener";

function useIdle(delay) {
  const idleTimeout = useRef(null);

  const [isIdle, setIsIdle] = useState(false);

  function handleMouseMove() {
    setIsIdle(false);

    if (idleTimeout.current) {
      clearTimeout(idleTimeout.current);
    }

    idleTimeout.current = setTimeout(() => {
      setIsIdle(true);
    }, delay);
  }

  useEventListener("mousemove", handleMouseMove);

  return isIdle;
}

export default useIdle;