Discord
Source code

use-idle

Detect if user does nothing on page
Import

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;
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback