react-context-menu
Version:
A lightweight right-click context menu implemented in React.
56 lines (41 loc) • 1.34 kB
Markdown
# react-context-menu
A lightweight right-click context menu implemented in React.

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:
```javascript
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:
```jsx
<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).