Registry / web-framework / react-contextmenu

react-contextmenu

library2.14.0jsnpmunverified

react-contextmenu is a React component library that provides accessible context menus (right-click menus) for web applications. It offers a declarative API to define context menu triggers and their associated menus, complete with individual menu items and dividers. The current stable version is 2.14.0. While there have been recent minor releases, the project is explicitly "Looking for maintainers," indicating a slowed or potentially halted development cadence without new contributors. Key differentiators include built-in accessibility support and a straightforward component-based API for integrating context menus into React applications, differentiating it from lower-level DOM manipulation or older jQuery-based solutions. It supports a wide range of browser versions, including older IE 11.

web-framework

npm install react-contextmenu

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-CONTEXTMENU

react-contextmenu

web-frameworkjavascriptv2.14.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ContextMenu

✓ import { ContextMenu } from 'react-contextmenu';

✗ const ContextMenu = require('react-contextmenu').ContextMenu;

Primarily designed for ES Modules. CommonJS usage requires destructuring from the default export or direct property access if bundling tools are not configured correctly. Ships with TypeScript types.

MenuItem

✓ import { MenuItem } from 'react-contextmenu';

✗ import MenuItem from 'react-contextmenu/MenuItem';

All core components are named exports from the root 'react-contextmenu' package. Direct subpath imports are generally incorrect and not recommended.

ContextMenuTrigger

✓ import { ContextMenuTrigger } from 'react-contextmenu';

✗ const { ContextMenuTrigger } = require('react-contextmenu');

The primary component for attaching a context menu to an element. Ensure consistent import style across your project.

Demonstrates how to set up a basic context menu with a trigger element and several menu items, including a divider and a disabled item. It highlights the crucial unique ID pairing between ContextMenuTrigger and ContextMenu components.

import React from "react"; import ReactDOM from "react-dom"; import { ContextMenu, MenuItem, ContextMenuTrigger } from "react-contextmenu"; function handleClick(e, data) { console.log(`Clicked on item with foo: ${data.foo}`); } function MyAppComponent() { return ( <div> <p>Right-click the box below to see a custom context menu.</p> {/* NOTICE: id must be unique between EVERY <ContextMenuTrigger> and <ContextMenu> pair */} {/* NOTICE: inside the pair, <ContextMenuTrigger> and <ContextMenu> must have the same id */} <ContextMenuTrigger id="my_unique_menu_id"> <div style={{ border: '1px solid gray', padding: '20px', width: '200px', cursor: 'context-menu' }}> Right click me! </div> </ContextMenuTrigger> <ContextMenu id="my_unique_menu_id"> <MenuItem data={{ foo: 'item1_data' }} onClick={handleClick}> Menu Item One </MenuItem> <MenuItem data={{ foo: 'item2_data' }} onClick={handleClick}> Menu Item Two </MenuItem> <MenuItem divider /> <MenuItem data={{ foo: 'item3_data' }} onClick={handleClick}> Menu Item Three (with separator) </MenuItem> <MenuItem disabled> Disabled Item </MenuItem> </ContextMenu> </div> ); } // Assuming a root element with id='root' in your HTML ReactDOM.render(<MyAppComponent />, document.getElementById("root"));

Debug

Known issues

gotchaThe project is explicitly "Looking for maintainers!!!". This indicates a potential lack of active development, slow response to issues, or eventual abandonment if new maintainers are not found. Consider its long-term viability for critical applications.

fix

Monitor the GitHub repository for updates on maintainership. Consider contributing or evaluating alternative libraries if long-term active support is crucial.

affects: >=2.9.2

breakingVersion 2.12.0 was marked as 'deprecated' due to a regression. Users are advised to avoid this specific version.

fix

Upgrade to version 2.13.0 or later to avoid known regressions and instability introduced in 2.12.0.

affects: 2.12.0

gotchaThe `id` prop for `ContextMenuTrigger` and `ContextMenu` must be a globally unique identifier across your application, and consistent between the paired trigger and menu.

fix

Ensure that `id` values like `same_unique_identifier` are dynamically generated or managed carefully to avoid collisions, especially when rendering multiple context menus. Use a unique string or a utility function to generate IDs.

affects: >=0.14.0

gotchaThe library has broad peer dependency ranges for `react` and `react-dom` (e.g., `^0.14.0 || ^15.0.0 || ^16.0.1`). While this allows flexibility, ensure your specific React version is compatible, especially with hooks-based components if you are using React 16.8+ features in your own application.

fix

Test thoroughly if integrating with newer React versions (17+). Although it might work, the wide peer dependency range might not explicitly guarantee full compatibility with the latest React features or internal changes.

affects: <17.0.0

Errors

Common errors & fixes

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)...

Incorrect import of ContextMenu, MenuItem, or ContextMenuTrigger components, often due to CommonJS require() syntax or mixing named/default imports.

fix

Use named imports for all components: `import { ContextMenu, MenuItem, ContextMenuTrigger } from 'react-contextmenu';`.

Warning: React does not recognize the `data` prop on a DOM element. If you intended to pass it to a custom component...

Attempting to pass the `data` prop directly to a standard HTML element within `ContextMenuTrigger` or `MenuItem` without proper handling, typically when `MenuItem` renders a custom component.

fix

The `data` prop on `MenuItem` is intended to be accessed in the `onClick` handler. If you need to pass data to a custom component rendered by `MenuItem`, ensure your custom component accepts those props. For the trigger, wrap the native element in a custom component that consumes `data` or pass only valid HTML attributes.

Menu does not appear on right-click, or appears and immediately disappears.

The `id` prop for `ContextMenuTrigger` and `ContextMenu` components do not match, or the `id` is not unique across the application, causing conflicts.

fix

Verify that `ContextMenuTrigger` and its corresponding `ContextMenu` share the exact same `id` string. Ensure this `id` is unique if you have multiple context menu pairs on the same page.

Upgrade

Version history

2.14.0latest on npm

Audit

Dependencies

prop-typesrequiredUsed for runtime type checking of component props, common in older React libraries.

reactrequiredCore React library for UI development.

react-domrequiredProvides DOM-specific rendering methods for React components.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/vkbansal/react-contextmenu ↗

packagehttps://www.npmjs.com/package/react-contextmenu ↗