useLongPress

跟蹤長按的 React Hook

Usage

即時編輯器

function Demo() {
  const [state, setState] = useState("未按下");
  const onLongPress = () => {
    setState("長按了！");
  };

  const defaultOptions = {
    isPreventDefault: true,
    delay: 300,
  };
  const longPressEvent = useLongPress(onLongPress, defaultOptions);

  return (
    <div>
      <button {...longPressEvent}>useLongPress</button>
      <button onClick={() => setState("未按下")}>重置</button>
      <div>按下狀態：{state}</div>
    </div>
  );
};

結果

按下狀態：未按下

API

useLongPress

Returns

{ readonly onMouseDown: (e: any) => void; readonly onTouchStart: (e: any) => void; readonly onMouseUp: () => void; readonly onMouseLeave: () => void; readonly onTouchEnd: () => void; }: 包含以下元素的對象：

• onMouseDown 滑鼠按下事件。
• onTouchStart 手指按下事件。
• onMouseUp 滑鼠放開事件。
• onMouseLeave 滑鼠離開事件
• onTouchEnd 手指放開事件

Arguments

參數名	描述	類型	預設值
callback	回调	(e: MouseEvent | TouchEvent) => void (必填)	-
options	可选参数	UseLongPressOptions | undefined	-

UseLongPressOptions

參數名	描述	類型	預設值
isPreventDefault	阻止默认事件	boolean	true
delay	延迟	number	300