useLongPress

useLongPress (길게 누르기)

useLongPress 훅은 사용자가 요소를 길게 누를 때 함수를 호출할 수 있게 해줘요. 마우스와 터치 입력을 모두 지원해요.

출처: 문서

본문

useLongPress 훅을 사용해 짧은 시간(임계값) 동안 요소를 누르고 있을 때 함수를 호출할 수 있어요.

import { Button } from '@mantine/core';
import { useLongPress } from '@mantine/hooks';
import { notifications } from '@mantine/notifications';

function Demo() {
  const handlers = useLongPress(() => notifications.show({ message: 'Long press triggered' }));
  return <Button {...handlers}>Press and hold</Button>;
}

특정 입력 타입으로 제한 (Restrict to specific input types)

기본적으로 길게 누르기는 마우스와 터치 입력 모두로 트리거돼요. events 옵션으로 일부로 제한할 수 있어요. 예를 들어 ['touch']는 터치 핸들러만 반환해 마우스 입력은 직접 처리하게 해요.

import { useLongPress } from '@mantine/hooks';

function Demo() {
  const handlers = useLongPress(() => console.log('Long pressed'), {
    events: ['touch'],
  });

  return <div {...handlers}>Press me</div>;
}

이동 시 취소 (Cancel on movement)

cancelOnMove를 설정하면 포인터가 시작 위치에서 주어진 거리보다 더 이동할 때 대기 중인 길게 누르기를 취소해요. 터치 기기에서 스크롤 제스처가 길게 누르기를 트리거하지 않도록 할 때 유용해요. true를 전달하면 기본 10px 임계값을 사용하고, 숫자를 전달하면 커스텀 임계값을 설정해요.

import { useLongPress } from '@mantine/hooks';

function Demo() {
  const handlers = useLongPress(() => console.log('Long pressed'), {
    cancelOnMove: true,
  });

  return <div {...handlers}>Press me</div>;
}

정의 (Definition)

type UseLongPressEvent = 'mouse' | 'touch';

interface UseLongPressOptions {
  /** Time in milliseconds to trigger the long press, default is 400ms */
  threshold?: number;
  /** Input types that can trigger the long press, `['mouse', 'touch']` by default */
  events?: UseLongPressEvent[];
  /** If set, the long press is canceled when the pointer moves further than the given distance in px from the start position. `true` uses a 10px threshold, a number sets a custom threshold. `false` by default */
  cancelOnMove?: boolean | number;
  /** Callback triggered when the long press starts */
  onStart?: (event: React.MouseEvent | React.TouchEvent) => void;
  /** Callback triggered when the long press finishes */
  onFinish?: (event: React.MouseEvent | React.TouchEvent) => void;
  /** Callback triggered when the long press is canceled */
  onCancel?: (event: React.MouseEvent | React.TouchEvent) => void;
}

interface UseLongPressReturnValue {
  onMouseDown?: (event: React.MouseEvent) => void;
  onMouseUp?: (event: React.MouseEvent) => void;
  onMouseLeave?: (event: React.MouseEvent) => void;
  onMouseMove?: (event: React.MouseEvent) => void;
  onTouchStart?: (event: React.TouchEvent) => void;
  onTouchEnd?: (event: React.TouchEvent) => void;
  onTouchCancel?: (event: React.TouchEvent) => void;
  onTouchMove?: (event: React.TouchEvent) => void;
}

function useLongPress(
  onLongPress: (event: React.MouseEvent | React.TouchEvent) => void,
  options?: UseLongPressOptions,
): UseLongPressReturnValue

Exported types

UseLongPressEvent, UseLongPressOptions, UseLongPressReturnValue 타입은 @mantine/hooks 패키지에서 내보내져요.

import type {
  UseLongPressEvent,
  UseLongPressOptions,
  UseLongPressReturnValue,
} from '@mantine/hooks';

더 알아보기 (Learn more)