useLongPress

useLongPress는 요소가 지정된 기간 동안 눌려지고 유지될 때를 감지하는 리액트 훅이에요. 마우스와 터치 이벤트를 모두 처리하여 데스크탑과 모바일 장치에서 일관되게 작동해요.

인터페이스

function useLongPress<E extends HTMLElement>(
  onLongPress: (event: React.MouseEvent<E> | React.TouchEvent<E>) => void,
  options?: UseLongPressOptions
): Object;

파라미터

onLongPressrequired · (event: React.MouseEvent<E> | React.TouchEvent<E>) => void
길게 누름이 감지되었을 때 실행될 콜백 함수예요.

optionsUseLongPressOptions
길게 누름 동작을 위한 설정 옵션이에요.
- options.delaynumber · 500
  길게 누름을 시작하기 전에 대기할 밀리초(ms) 단위의 시간이에요. 기본값은 500ms예요.
- options.moveThresholdObject
  길게 누름을 취소하기 전에 허용되는 최대 움직임이에요.
- options.moveThreshold.xnumber
  최대 수평 움직임을 픽셀 단위로 설정해요.
- options.moveThreshold.ynumber
  최대 수직 움직임을 픽셀 단위로 설정해요.
- options.onClick(event) => void
  일반 클릭(지연 전에 눌렀다 놓기) 시 실행할 선택적 함수예요.
- options.onLongPressEnd(event) => void
  길게 누름이 끝났을 때 실행할 선택적 함수예요.

반환 값

Object
요소에 연결할 이벤트 핸들러예요.
- onMouseDown(event: MouseEvent<E> | TouchEvent<E>) => void
  마우스 다운 이벤트에 대한 이벤트 핸들러예요.
- onMouseUp(event: MouseEvent<E> | TouchEvent<E>) => void
  마우스 업 이벤트에 대한 이벤트 핸들러예요.
- onMouseLeave(event: MouseEvent<E> | TouchEvent<E>) => void
  마우스가 요소를 벗어나는 이벤트에 대한 이벤트 핸들러예요.
- onTouchStart(event: MouseEvent<E> | TouchEvent<E>) => void
  터치 시작 이벤트에 대한 이벤트 핸들러예요.
- onTouchEnd(event: MouseEvent<E> | TouchEvent<E>) => void
  터치 종료 이벤트에 대한 이벤트 핸들러예요.
- onMouseMove(event: MouseEvent<E> | TouchEvent<E>) => void
  마우스 이동 이벤트에 대한 이벤트 핸들러예요. moveThreshold가 제공되면 포함돼요.
- onTouchMove(event: MouseEvent<E> | TouchEvent<E>) => void
  터치 이동 이벤트에 대한 이벤트 핸들러예요. moveThreshold가 제공되면 포함돼요.

예시

tsx

import { useLongPress } from 'react-simplikit';

function ContextMenu() {
  const [menuVisible, setMenuVisible] = useState(false);

  const longPressHandlers = useLongPress(() => setMenuVisible(true), {
    delay: 400,
    onClick: () => console.log('일반 클릭'),
    onLongPressEnd: () => console.log('길게 누름 완료'),
  });

  return (
    <div>
      <button {...longPressHandlers}>눌러서 유지해보세요</button>
      {menuVisible && <div className="context-menu">컨텍스트 메뉴</div>}
    </div>
  );
}

useLongPress ​

인터페이스 ​

파라미터 ​

반환 값 ​

예시 ​

useLongPress

인터페이스

파라미터

반환 값

예시