Skip to main content


The useIdle() hook lets you detect current user activity or inactivity on a web page, returning a boolean value that represents whether or not the user is currently active. The user is set as inactive when no events are triggered after a specified delay.


import { useIdle } from 'react-haiku';


Default Options

Current Status: Idle
import { useIdle } from "react-haiku"

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

return <b>Current Status: {idle ? 'Idle' : 'Active'}</b>

Custom Options

Works only with click/touch events!Current Status: Active
import { useIdle } from "react-haiku"

export const Component = () => {
const idle = useIdle(1000, { events: ['click', 'touchstart'], initialState: false });

return (
<b>Works only with click/touch events!</b>
<b>Current Status: {idle ? 'Idle' : 'Active'}</b>


This hook accepts the following arguments:

  • timeout - the time until the state is set as inactive
  • options - the options object you can pass in
    • events - string array, the collection of events that will trigger activity signals, by default: ['keypress', 'mousemove', 'touchmove', 'click', 'scroll']
    • initialState - boolean, the initial activity state