useDoubleClick.md

useDoubleClick

useDoubleClick는 단일 클릭과 더블 클릭 이벤트를 구분하는 리액트 훅이에요. 지정된 시간 동안 단일 클릭 콜백 실행을 지연시키고, 그 시간 안에 두 번째 클릭(즉, 더블 클릭)이 발생하면 이를 취소해요.

인터페이스

function useDoubleClick<E extends HTMLElement>(
  params: Object
): (event: MouseEvent<E>) => void;

파라미터

반환 값

예시

function GalleryCard() {
  const [selected, setSelected] = useState(false);

  const handleClick = () => setSelected(prev => !prev);
  const handleDoubleClick = () => alert('확대해요!');

  const handleEvent = useDoubleClick({
    click: handleClick,
    doubleClick: handleDoubleClick,
  });

  return (
    <div onClick={handleEvent}>{selected ? '선택됨' : '선택되지 않음'}</div>
  );
}