{"id":11670,"library":"react-contextmenu","title":"React Context Menu","description":"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.","status":"maintenance","version":"2.14.0","language":"javascript","source_language":"en","source_url":"https://github.com/vkbansal/react-contextmenu","tags":["javascript","react","reactjs","react-component","contextmenu","rightclick","typescript"],"install":[{"cmd":"npm install react-contextmenu","lang":"bash","label":"npm"},{"cmd":"yarn add react-contextmenu","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-contextmenu","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used for runtime type checking of component props, common in older React libraries.","package":"prop-types","optional":false},{"reason":"Core React library for UI development.","package":"react","optional":false},{"reason":"Provides DOM-specific rendering methods for React components.","package":"react-dom","optional":false}],"imports":[{"note":"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.","wrong":"const ContextMenu = require('react-contextmenu').ContextMenu;","symbol":"ContextMenu","correct":"import { ContextMenu } from 'react-contextmenu';"},{"note":"All core components are named exports from the root 'react-contextmenu' package. Direct subpath imports are generally incorrect and not recommended.","wrong":"import MenuItem from 'react-contextmenu/MenuItem';","symbol":"MenuItem","correct":"import { MenuItem } from 'react-contextmenu';"},{"note":"The primary component for attaching a context menu to an element. Ensure consistent import style across your project.","wrong":"const { ContextMenuTrigger } = require('react-contextmenu');","symbol":"ContextMenuTrigger","correct":"import { ContextMenuTrigger } from 'react-contextmenu';"}],"quickstart":{"code":"import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { ContextMenu, MenuItem, ContextMenuTrigger } from \"react-contextmenu\";\n\nfunction handleClick(e, data) {\n  console.log(`Clicked on item with foo: ${data.foo}`);\n}\n\nfunction MyAppComponent() {\n  return (\n    <div>\n      <p>Right-click the box below to see a custom context menu.</p>\n      {/* NOTICE: id must be unique between EVERY <ContextMenuTrigger> and <ContextMenu> pair */}\n      {/* NOTICE: inside the pair, <ContextMenuTrigger> and <ContextMenu> must have the same id */}\n\n      <ContextMenuTrigger id=\"my_unique_menu_id\">\n        <div style={{ border: '1px solid gray', padding: '20px', width: '200px', cursor: 'context-menu' }}>\n          Right click me!\n        </div>\n      </ContextMenuTrigger>\n\n      <ContextMenu id=\"my_unique_menu_id\">\n        <MenuItem data={{ foo: 'item1_data' }} onClick={handleClick}>\n          Menu Item One\n        </MenuItem>\n        <MenuItem data={{ foo: 'item2_data' }} onClick={handleClick}>\n          Menu Item Two\n        </MenuItem>\n        <MenuItem divider />\n        <MenuItem data={{ foo: 'item3_data' }} onClick={handleClick}>\n          Menu Item Three (with separator)\n        </MenuItem>\n        <MenuItem disabled>\n          Disabled Item\n        </MenuItem>\n      </ContextMenu>\n\n    </div>\n  );\n}\n\n// Assuming a root element with id='root' in your HTML\nReactDOM.render(<MyAppComponent />, document.getElementById(\"root\"));","lang":"javascript","description":"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."},"warnings":[{"fix":"Monitor the GitHub repository for updates on maintainership. Consider contributing or evaluating alternative libraries if long-term active support is crucial.","message":"The 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.","severity":"gotcha","affected_versions":">=2.9.2"},{"fix":"Upgrade to version 2.13.0 or later to avoid known regressions and instability introduced in 2.12.0.","message":"Version 2.12.0 was marked as 'deprecated' due to a regression. Users are advised to avoid this specific version.","severity":"breaking","affected_versions":"2.12.0"},{"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.","message":"The `id` prop for `ContextMenuTrigger` and `ContextMenu` must be a globally unique identifier across your application, and consistent between the paired trigger and menu.","severity":"gotcha","affected_versions":">=0.14.0"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":"<17.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Use named imports for all components: `import { ContextMenu, MenuItem, ContextMenuTrigger } from 'react-contextmenu';`.","cause":"Incorrect import of ContextMenu, MenuItem, or ContextMenuTrigger components, often due to CommonJS require() syntax or mixing named/default imports.","error":"Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)..."},{"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.","cause":"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.","error":"Warning: React does not recognize the `data` prop on a DOM element. If you intended to pass it to a custom component..."},{"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.","cause":"The `id` prop for `ContextMenuTrigger` and `ContextMenu` components do not match, or the `id` is not unique across the application, causing conflicts.","error":"Menu does not appear on right-click, or appears and immediately disappears."}],"ecosystem":"npm"}