React Context Menu

Common errors

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

  cause 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...

  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.
  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.

  cause 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.

Warnings

• gotcha 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.
  Fix: Monitor the GitHub repository for updates on maintainership. Consider contributing or evaluating alternative libraries if long-term active support is crucial.
• breaking Version 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.
• gotcha The `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.
• gotcha 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.
  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.

Install

• npm install react-contextmenu npm
• yarn add react-contextmenu yarn
• pnpm add react-contextmenu pnpm

Imports

• ContextMenu
  wrong:

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

  correct:

  import { ContextMenu } from 'react-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
  wrong:

  import MenuItem from 'react-contextmenu/MenuItem';

  correct:

  import { MenuItem } from 'react-contextmenu';

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

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

  correct:

  import { ContextMenuTrigger } from 'react-contextmenu';

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

Quickstart

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"));