Nutella with Pepperoni and Mushrooms
Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

react-context-menu

3.0.2 • Public • Published

react-context-menu

A lightweight right-click context menu implemented in React.

example right-click menu

To use:

Install the component in your project:

npm install react-context-menu --save

or, if using yarn:

yarn add --dev react-context-menu

Import the component into your project:

import ContextMenu from 'react-context-menu';

Pass a contextId, and an array of menu items with labels, onClick functions, and optional icon paths -- like so:

<ContextMenu
  contextId={'clickable-area'}
  items={[
    {
      label: 'Configure',
      onClick: this.configHandler,
      icon: 'path/to/icon.svg'
    },
    {
      label: 'Delete',
      onClick: this.deleteHandler
    }
  ]} />

The contextId is the area in which you'd like right-click functionality. Add a unique id to your right-clickable element, and react-context-menu will be available anywhere within that element.

Pass closeOnClick (boolean defaulted to false) to ContextMenu to close the menu upon item click.

Pass closeOnClickOut (boolean defaulted to false) to ContextMenu to close the menu upon clicking outside of the menu (versus the default, which will close the menu when the mouse moves outside of the menu boundary).

Install

npm i react-context-menu

DownloadsWeekly Downloads

150

Version

3.0.2

License

ISC

Unpacked Size

15.5 kB

Total Files

10

Last publish

Collaborators

  • avatar