React-Contexted

A custom Context menu for React with simple object based setup.

Installation

npm install react-contexted

Usage

Add the context menu to your app first. You can trigger the context menu by adding onContextMenu() prop to any element.

import {ContextMenu, onContextMenu} from 'react-contexted';

const App = () => {
  let basicOptions = [
    {
      label: 'Copy',
      onClick: () => {
        console.log('Copy');
      },
    },
    {
      label: 'Paste',
      onClick: () => {
        console.log('Paste');
      },
    },
    {
      label: 'Cut',
      onClick: () => {
        console.log('Cut');
      },
    },
  ]
  return (
    <div>
      <div onContextMenu={onContextMenu(menuOptions)}>Right click to see a context menu!</div>
      <ContextMenu />
    </div>
  );
};

CSS

Outside of base location style and absolute positioning, the context menu is not styled. These are the assigned class names for the context menu and its options.

Menu:

.context-menu{}

Menu item (active is hover, only when it is not disabled):

.context-menu-item{}
.context-menu-item.active{}
.context-menu-item.disabled{}

Having Multiple Context Menus

You can create multiple