useLongPress

React sensor hook that fires a callback after long pressing

Usage

Live Editor

function Demo() {
  const [state, setState] = useState("No Press");
  const onLongPress = () => {
    setState("Long Pressed!");
  };

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

  return (
    <div>
      <button {...longPressEvent}>useLongPress</button>
      <button onClick={() => setState("No Press")}>Reset</button>
      <div>Pressed: {state}</div>
    </div>
  );
};

Result

Loading...

API

useLongPress

Returns

{ readonly onMouseDown: (e: any) => void; readonly onTouchStart: (e: any) => void; readonly onMouseUp: () => void; readonly onMouseLeave: () => void; readonly onTouchEnd: () => void; }: A object with the following elements:

• onMouseDown: Mouse down event.
• onTouchStart: Finger touch start event.
• onMouseUp: Mouse up event.
• onMouseLeave: Mouse leave event.
• onTouchEnd: Finger touch end event.

Arguments

Argument	Description	Type	DefaultValue
callback	callback	(e: MouseEvent | TouchEvent) => void (Required)	-
options	optional params	UseLongPressOptions | undefined	-

UseLongPressOptions

Property	Description	Type	DefaultValue
isPreventDefault	whether prevent default event	boolean	true
delay	delay time	number	300