v4.2.12

use-idle

Detect if user does nothing on page
Import
Source
View source code
Docs
Edit this page
Package
@mantine/hooks

Usage

use-idle detects 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 idle = 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 in the options argument:

Current state: idle
import { Badge } from '@mantine/core';
import { useIdle } from '@mantine/hooks';


function Demo() {
  const idle = useIdle(2000, { events: ['click', 'touchstart'] });
  return <Badge color={idle ? 'blue' : 'teal'}>Current state: {idle ? 'idle' : 'not idle'}</Badge>;
}

Initial state

By default, the hook will return an idle state. To change that provide an initial state value in the options argument:

Current state: not idle
import { Badge } from '@mantine/core';
import { useIdle } from '@mantine/hooks';


function Demo() {
  const idle = useIdle(2000, { initialState: false });
  return <Badge color={idle ? 'blue' : 'teal'}>Current state: {idle ? 'idle' : 'not idle'}</Badge>;
}

Definition

function useIdle(
  timeout: number,
  options?: Partial<{ events: string[]; initialState: boolean }>
): boolean;
Go back
use-id – @mantine/hooks
Up next
use-input-state – @mantine/hooks
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter