A React hook that detects long clicks/taps.

npm i @utilityjs/use-long-press | yarn add @utilityjs/use-long-press

Usage

const App: React.FC = () => {
  const { registerNode } = useLongPress(
    () => {
      console.log("long pressed");
    },
    { preventLongPressOnMove: true, preventContextMenuOnLongPress: true }
  );

  return (
    <div className="app">
      <div
        ref={registerNode}
        style={{ width: 48, height: 48, backgroundColor: "red" }}
      ></div>
    </div>
  );
};

API

useLongPress(callback, options?)

interface Options {
    pressDelay?: number;
    moveThreshold?: number;
    preventContextMenuOnLongPress?: boolean;
    preventLongPressOnMove?: boolean;
}

interface HookReturn {
    registerNode: <T extends HTMLElement>(node: T | null) => void;
}

declare const useLongPress: (callback: () => void, options?: Options) => HookReturn;

callback

The callback is called when the long press happened.

options.pressDelay - default: 500

The time (in miliseconds) user need to hold click or tap before long press callback is triggered.

options.moveThreshold - default: 25

The move tolerance in pixels.

options.preventContextMenuOnLongPress - default: false

Determines whether default context menu should be cancelled when long press happened.

options.preventLongPressOnMove - default: false

Determines whether long press should be cancelled when detected movement while pressing.