useDoubleClick

useDoubleClick は、シングルクリックとダブルクリックのイベントを区別する React フックです。 シングルクリックのコールバックの実行を指定時間だけ遅らせ、その間に 2 回目のクリック（つまりダブルクリック）が発生した場合は、その実行をキャンセルします。

インターフェース

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

パラメータ

• propsrequired · Object
  

  クリック処理の設定オプション。

  • props.delaynumber · 250
    

    シングルクリックのコールバックを実行するまでの待機時間（ミリ秒単位）です。デフォルトは 250 ミリ秒です。

  • props.click(event: MouseEvent<E>) => void
    

    シングルクリック時に実行するコールバック関数。

  • props.doubleClickrequired · (event: MouseEvent<E>) => void
    

    ダブルクリック時に実行するコールバック関数です。必須です。

戻り値

• (event: MouseEvent<E>) => void
  

  要素の onClick イベントに設定するクリックハンドラー関数。

使用例

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

  const handleClick = () => setSelected(prev => !prev);
  const handleDoubleClick = () => alert('Zoom in!');

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

  return (
    <div onClick={handleEvent}>{selected ? 'Selected' : 'Not selected'}</div>
  );
}