useIdle

Detect user idle state.

Import


import { useIdle } from '@tidbcloud/uikit'

Usage

useIdle detects if the user does nothing for a given time in ms.


import { useIdle } from '@tidbcloud/uikit'
import { Text } from '@tidbcloud/uikit'
 
function Demo() {
  const idle = useIdle(2000)
 
  return <Text>{idle ? 'User is idle' : 'User is active'}</Text>
}

Custom Events

By default, the hook listens to keypress, mousemove, touchmove, wheel, click, and scroll events. You can customize these:


import { useIdle } from '@tidbcloud/uikit'
 
const idle = useIdle(2000, { events: ['click', 'keypress'] })

Initial State

By default, the hook returns true (idle) on initial render. Change with initialState:


import { useIdle } from '@tidbcloud/uikit'
 
const idle = useIdle(2000, { initialState: false })

Definition


interface UseIdleOptions {
  events?: (keyof DocumentEventMap)[]
  initialState?: boolean
}
 
function useIdle(timeout: number, options?: UseIdleOptions): boolean