use-right-click

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

Demo

Right-click here (desktop) or long-press (mobile)

Context Info

Last Trigger

Trigger the context menu to see event details

Usage

import useRightClick from "use-right-click";

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

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