React Context Menu

React context menu is a simple library to implement custom context menus in your react application. This package is still in development, feel free to report bugs, ask question and make suggestions.

Read the full documentation for more information.

Known issues:

• Nested menus will open one window each without closing the previous one. Might be desireable in some cases, I'll add the possibility to choose in the next versions.
• The current version has a problem with positioning depending whether the page is scrollable or not. The fix will probably be introduced in the next version (0.3.0) along with other features. Check the Additional props section for more info.

News:

v0.2.7

• Refactoring and optimization: the code has been refactored and optimized. The component is now much more lightweight and faster.
• Accessibility: the component is now compatible with basic accessibility standards. You can now open the menu with Enter/Spacebar, close it with Escape and navigate it with Tab and arrows. More complete accessibility features will be added in the future. Check the Accessibility page for more info.

v0.2.2

• Bugfix: fixed a bug that prevented the menu from opening in the right spot when the document was scrollable. Refer to the Additional Props page for more info.

v0.2.0

• Dynamic positioning: now the context menu will open around the cursor depending on the available space. No more squashed menus.
• Improve events: removed useless events and shifted the remaining ones.
• Menu nesting: now you can nest menus one inside the other, each with its own items and styles.
• Classes: you will now be able to use your project's css classes and modules to style the menu and its individual components.
• Disable options: you can now disable items of the menu. You can also specify a class to be used on disabled options.
• Generic fixes and optimizations.

Installation

npm

npm i @ni7r0g3n/react-context-menu

yarn

yarn add @ni7r0g3n/react-context-menu

Base Use

The component is very easy to use.

Wrap the component to the area you want to use the context menu on and pass an array of options. The "label" can be both a string or a component.

import { ContextMenu } from "@ni7r0g3n/react-context-menu";

function App() {
  const items = [
    { label: "Create", onClick: () => alert("Create clicked") },
    { label: "Edit", onClick: () => alert("Edit clicked") },
    { label: "Delete", onClick: () => alert("Delete clicked") },
  ];

  return (
    <ContextMenu items={items}>
      <div> Item to right click </div>
      <div> or items </div>
    </ContextMenu>
  );
}

Nesting

It's also possible to nest context menus inside other context menus. This is useful if you need to specify different options for a specific context menu child. Keep in mind that as of now, each context menu you place has its own window, this means that opening a different context menu will not close the previous one.

const items = [
  { label: "Create", onClick: () => alert("Create clicked") },
  { label: "Edit", onClick: () => alert("Edit clicked") },
  { label: "Delete", onClick: () => alert("Delete clicked") },
];

const nestedItems = [
  { label: "Nested 1", onClick: () => alert("Nested 1 clicked") },
  { label: "Nested 2", onClick: () => alert("Nested 2 clicked") },
  { label: "Nested 3", onClick: () => alert("Nested 3 clicked") },
];

return (
  <ContextMenu items={items}>
    <div> Item to right click </div>
    <ContextMenu items={nestedItems}>
      <div> or items </div>
    </ContextMenu>
  </ContextMenu>
);

Disabling options

It's also possible to disable an option by setting the disabled flag on the desired item. You can also use the disabledClassName prop to specify a class to use (by default it's a grayscale and blur filter).

const items = [
  { label: "Create", onClick: () => alert("Create clicked") },
  {
    label: "Edit",
    onClick: () => alert("Edit clicked"),
    disabled: true,
    disabledClassName: "class-name",
  },
  { label: "Delete", onClick: () => alert("Delete clicked") },
];

Links:

• Docs
• GitHub Repo
• NPM Package