UNPKG

react-context-menu

Version:

A lightweight right-click context menu implemented in React.

56 lines (41 loc) 1.34 kB
# react-context-menu A lightweight right-click context menu implemented in React. ![example right-click menu](react-context-menu.png?raw=true "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: ```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).