useLongPress

useLongPress は、要素が指定した時間押し続けられたことを検出する React フックです。マウスイベントとタッチイベントの両方を処理するため、デスクトップ端末とモバイル端末で一貫した動作を実現できます。

インターフェース

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
  長押しと判定されるまでの時間（ミリ秒）です。デフォルトは 500ms です。
- options.moveThresholdObject
  長押しがキャンセルされずに許容される最大移動量です。
- options.moveThreshold.xnumber
  水平方向の最大移動量（ピクセル）です。
- options.moveThreshold.ynumber
  垂直方向の最大移動量（ピクセル）です。
- options.onClick(event) => void
  通常のクリック（押してから delay が経過する前に離す操作）で実行する関数です。省略できます。
- 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('Normal click'),
    onLongPressEnd: () => console.log('Long press completed'),
  });

  return (
    <div>
      <button {...longPressHandlers}>Press and hold</button>
      {menuVisible && <div className="context-menu">Context Menu</div>}
    </div>
  );
}

useLongPress ​

インターフェース ​

パラメータ ​

戻り値 ​

使用例 ​

useLongPress

インターフェース

パラメータ

戻り値

使用例