Overview

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.

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.

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

Right click here!

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

This has different options

than this

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") },
];

Right click here!