use-right-click

v0.1.1TypeScript

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

react hook context-menu right-click long-press touch mobile

0/weekUpdated 1 months agoMITUnpacked: 19.1 KB

Published by piro0919

npm install use-right-click

Repository Homepage npm

use-right-click

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

Demo

Installation

``bash npm install use-right-click`

`Usage`

`tsx import useRightClick from "use-right-click"; import { useRef } from "react";

function MyComponent() { const ref = useRef(null); const { context, close, handlers } = useRightClick({ ref, onTrigger: (e) => console.log("Context menu triggered:", e), });

return (


      {context && (
                  style={{
            position: "fixed",
            left: context.clientX,
            top: context.clientY,
          }}
        >

)}


  );
}


API
$3
#### Props

| Property | Type | Description | |----------|------|-------------| |ref | RefObject| Reference to the target element | |onTrigger | (e: MouseEvent \| PointerEvent) => void| Optional callback when context menu is triggered | |options | UseRightClickOptions | Optional configuration |

#### Options

| Option | Type | Default | Description | |--------|------|---------|-------------| |threshold | number | 400| Long press duration in milliseconds | |cancelOnMovement | number \| boolean | 25| Cancel if finger moves more than this many pixels | |detect | LongPressEventType | "pointer" | Event type to detect: "mouse", "touch", or "pointer" |

#### Return Value

| Property | Type | Description | |----------|------|-------------| |context | RightClickContext \| null | Current context menu state, nullwhen closed | |close | () => void| Function to close the context menu | |handlers | () => EventHandlers | Spread on target element for long-press support |

`$3`

Contains event information when context menu is triggered:

- clientX, clientY- Viewport coordinates -pageX, pageY- Page coordinates -screenX, screenY- Screen coordinates -target- The element that was clicked/touched -currentTarget- The element the handler is attached to -altKey, ctrlKey, metaKey, shiftKey- Modifier keys -button, buttons- Mouse button info -type, timeStamp- Event metadata -pointerType, pressure, width, height - Pointer event info (when available)

`Features`

- Desktop right-click support via contextmenuevent - Mobile long-press support viause-long-press`
- Configurable long-press threshold and movement tolerance
- Full event context including position, modifiers, and pointer details
- TypeScript support with full type definitions

License

MIT

Usage

tsx
import useRightClick from "use-right-click";
import { useRef } from "react";

function MyComponent() {
  const ref = useRef(null);
  const { context, close, handlers } = useRightClick({
    ref,
    onTrigger: (e) => console.log("Context menu triggered:", e),
  });

  return (


      {context && (
                  style={{
            position: "fixed",
            left: context.clientX,
            top: context.clientY,
          }}
        >

)}