Mantine UIFAQColors generator

use-idle

Detects if the user does nothing on the page

Source

View source code

Docs

Edit this page

PackageIcon

@mantine/hooks

Usage

The use-idle hook detects if the user does nothing for a given time in milliseconds:

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, the hook will listen to keypress, mousemove, touchmove, wheel, click, and scroll events to set the 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 this, 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

interface UseIdleOptions {
  events?: (keyof DocumentEventMap)[];
  initialState?: boolean;
}

function useIdle(timeout: number, options?: UseIdleOptions): boolean;

Exported types

The UseIdleOptions type is exported from @mantine/hooks;

import type { UseIdleOptions } from '@mantine/hooks';

use-headroom

use-interval