useIdleTimeout

This utility hook helps you track user activity and trigger actions when the user becomes inactive for a specified period of time. It is useful for scenarios where you want to perform interaction-dependent tasks, such as showing a warning message or logging out a user when there has been no user interaction for a certain amount of time.

Usage

1. Make sure you have @ridgehkr/useful installed in your application. If not, you can get started by following the installation instructions.

2. Import useIdleTimeout into your component.

import { useIdleTimeout } from '@ridgehkr/useful'

Example

Here, useIdleTimeout is used to monitor user activity, updating a boolean return value to indicate whether the user is idle or active:

import { useIdleTimeout } from '@ridgehkr/useful'
 
function IdleMonitor() {
  // trigger after 30 seconds of inactivity
  const isIdle = useIdleTimeout(30000)
 
  // Idle: "User is idle."
  // Active: "User is active."
  return <div>{isIdle ? <p>User is idle.</p> : <p>User is active.</p>}</div>
}

API Reference

Hook Signature

useIdleTimeout(timeout: number): boolean

Parameters

useIdleTimeout accepts a single argument; the number of milliseconds of inactivity required to trigger the idle state.

Return Value

The useIdleTimeout hook returns a boolean value indicating whether the user is currently idle (true) or active (false).