useIdle()

The useIdle() hook tracks user activity (mouse movement, keyboard input, scrolling, etc.) and determines if the user has been inactive for a specified duration.

Import

typescript

import { useIdle } from 'the-react-hooks';

Usage

User Status

Active

Stop moving your mouse or typing for 3 seconds to trigger the idle state.

(Events monitored: mousemove, keydown, scroll, touch, etc.)

Component.tsx

import { useIdle } from 'the-react-hooks';

export const Component = () => {
  const isIdle = useIdle(3000);

  return (
    <div>
      <p>Status: {isIdle ? 'User is Idle 💤' : 'User is Active ⚡'}</p>
    </div>
  );
}

API

Arguments

ms – number (Optional) The timeout in milliseconds before the user is considered idle. Defaults to 60000 (1 minute).

Returns

Returns a boolean value:

isIdle – boolean True if the user has been inactive for the specified duration, False otherwise.

PrevioususeHover NextuseIntersectionObserver