useIdle

This component uses the useIdle hook to detect if the user is idle for a given timeout (2 seconds).

The user is

idle

Interact with the page (keyboard, mouse, scroll, etc) to reset the idle timer.

Installation

Prop	Type	Default	Description
`timeout`	`number`	1000	The timeout in milliseconds
`options?`	`UseIdleOptions`		The options for the hook

Prop	Type	Default	Description
`events?`	`string[]`	`DEFAULT_EVENTS`	The events to listen to
`initialState?`	`boolean`	`true`	The initial state of the idle state

Prop	Type	Description
`idle`	`boolean`	Whether the user is idle for the given timeout
`reset`	`() => void`	Resets the idle state

The hook listens to a configurable set of user events (e.g., keydown, mousemove, click, etc.) to detect activity.
You can customize the events via the options.events array.

The idle state is set to true if no activity is detected for the specified timeout (in ms).
Any user activity resets the timer and sets idle to false.
The timer is initialized on mount and reset on every relevant event.

The reset function can be called manually to reset the idle timer and set idle to false.

All event listeners and timers are cleaned up automatically when the component unmounts.

The hook is client-side only; on the server, it does not track user activity.
For best performance, avoid creating new event arrays on every render (use useMemo if needed).
The hook is useful for auto-logout, UI dimming, or other inactivity features.

const [idle, reset] = useIdle(2000);
if (idle) {
  // Show idle warning or log out
}

const [idle] = useIdle(3000, { events: ['mousemove', 'keydown'] });

const [idle, reset] = useIdle(5000);
<button onClick={reset}>Reset Idle Timer</button>;