use-right-click

React hook for custom context menus with desktop right-click and mobile long-press support.

npm i use-right-click
Right-click anywhere on this page — or long-press on a touch screen.

Last trigger

Nothing yet. The event details land here.

Usage

import useRightClick from "use-right-click";

function MyComponent() {
  const ref = useRef<HTMLDivElement>(null);
  const { context, close } = useRightClick({
    ref,
    onTrigger: (e) => console.log(e),
    options: {
      threshold: 400,        // Long press duration (ms)
      cancelOnMovement: 25,  // Cancel if moved (px)
    },
  });

  return (
    <div ref={ref}>
      {context && (
        <Menu x={context.clientX} y={context.clientY} onClose={close} />
      )}
    </div>
  );
}