Sensors

useIdle

Tracks whether the user is inactive (idle). Monitors user interaction events like mouse movement, keyboard input, touch, and window resize. After a configurable timeout with no activity, the idle state becomes true.

Demo

Idle Detection

Active

Tracks user inactivity. Becomes idle after 5 seconds of no interaction.

Last Active

8:52:33 AM

import { 
const useIdle: (options?: DeepMaybeObservable<UseIdleOptions>) => UseIdleReturn
useIdle } from "@usels/web";

function 
function IdleTracker(): JSX.Element
IdleTracker() {
  const { 
const idle$: ReadonlyObservable<boolean>
Whether the user is currently idle
idle$, 
const lastActive$: ReadonlyObservable<number>
Timestamp of last user activity
lastActive$, 
const reset: () => void
Reset the idle timer
reset } = 
function useIdle(options?: DeepMaybeObservable<UseIdleOptions>): UseIdleReturn
Framework-agnostic idle tracker.
Monitors user interaction events (mouse, keyboard, touch, resize) and
sets idle$ to true after a configurable timeout with no activity.
useIdle({ 
timeout: number
timeout: 5000 });

  return (
    <
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Idle: {
const idle$: ReadonlyObservable<boolean>
Whether the user is currently idle
idle$.
ImmutableObservableBase<boolean>.get(trackingType?: TrackingType | GetOptions): {}
get() ? "Yes" : "No"}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Last active: {new 
any
Date(
const lastActive$: ReadonlyObservable<number>
Timestamp of last user activity
lastActive$.
ImmutableObservableBase<number>.get(trackingType?: TrackingType | GetOptions): {}
get()).
any
toLocaleTimeString()}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button 
DOMAttributes<HTMLButtonElement>.onClick?: MouseEventHandler<HTMLButtonElement> | undefined
onClick={
const reset: () => void
Reset the idle timer
reset}>Reset</
JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button>
    </
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
  );
}

import { createIdle } from "@usels/web";

function IdleTracker() {
  "use scope"
  const { idle$, lastActive$, reset } = createIdle({ timeout: 5000 });

  return (
    <div>
      <p>Idle: {idle$.get() ? "Yes" : "No"}</p>
      <p>Last active: {new Date(lastActive$.get()).toLocaleTimeString()}</p>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

Custom Events

// @noErrors
import { useIdle } from "@usels/web";

// Only track mouse and keyboard events
const { idle$ } = useIdle({
  timeout: 10000,
  events: ["mousemove", "keydown"],
});

Type

Parameters

Parameter	Type	Description
`options`	`UseIdleOptions` (optional)	-

UseIdleOptions

Option	Type	Default	Description
`timeout`	`number`	`-`	Timeout in ms before idle state (default: 60000)
`events`	`string[]`	`-`	Events to listen for activity (default: mousemove, mousedown, resize, keydown, touchstart, wheel)
`listenForVisibilityChange`	`boolean`	`-`	Also listen to visibilitychange (default: true)
`initialState`	`boolean`	`-`	Initial idle state (default: false)
`window`	`WindowSource`	`-`	-

Returns

UseIdleReturn

Name	Type	Description
`idle$`	`ReadonlyObservable<boolean>`	Whether the user is currently idle
`lastActive$`	`ReadonlyObservable<number>`	Timestamp of last user activity
`reset`	`() => void`	Reset the idle timer

Source

View on GitHub