use-idle
Detect if user does nothing on page
Import
Source
Docs
Package
Usage
Hook detect if user does nothing for given time in ms:
Current state: idle
import { Badge } from '@mantine/core';import { useIdle } from '@mantine/hooks';function Demo() {const idleStatus = useIdle(2000);return <Badge color={idle ? 'blue' : 'teal'}>Current state: {idle ? 'idle' : 'not idle'}</Badge>;};
Custom events
By default hook will listen to keypress, mousemove, touchmove, click and scroll events to set idle status. To change that provide a list of events as second argument:
Current state: idle
import { Badge } from '@mantine/core';import { useIdle } from '@mantine/hooks';function Demo() {const idleStatus = useIdle(2000, ['click', 'touchstart']);return <Badge color={idle ? 'blue' : 'teal'}>Current state: {idle ? 'idle' : 'not idle'}</Badge>;};
Definition
function useIdle(timeout: number, events?: string[]): boolean;
Built by Vitaly Rtishchev and these awesome people