useIdle

useIdle (사용자 비활성 감지)

useIdle 훅은 사용자가 주어진 시간(밀리초) 동안 아무것도 하지 않는지 감지해요.

출처: 문서

본문

useIdle 훅은 사용자가 주어진 시간(밀리초) 동안 아무것도 하지 않았는지 감지해요.

import { Badge } from '@mantine/core';
import { useIdle } from '@mantine/hooks';

function Demo() {
  const idle = useIdle(2000);
  return <Badge>Current state: {idle ? 'idle' : 'not idle'}</Badge>;
}

커스텀 이벤트 (Custom events)

기본적으로 이 훅은 keydown, mousemove, touchmove, click, scroll, wheel 이벤트를 들어 비활성 상태를 설정해요. 이를 변경하려면 options 인자에 이벤트 목록을 제공하세요.

const idle = useIdle(2000, { events: ['click', 'touchstart'] });

초기 상태 (Initial state)

기본적으로 이 훅은 비활성 상태를 반환해요. 이를 변경하려면 options 인자에 초기 상태 값을 제공하세요.

const idle = useIdle(2000, { initialState: false });

정의 (Definition)

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

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

Exported types

UseIdleOptions 타입은 @mantine/hooks에서 내보내져요.

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

더 알아보기 (Learn more)