NPM version Build Status Dependency Status Dev Dependency Status Code Climate
ContextMenu in React with accessibility support. Live Examples can be found here
Using npm
npm install --save react-contextmenu
Using yarn
yarn add react-contextmenu
- IE 11 and Edge >= 12
- FireFox >= 38
- Chrome >= 47
- Opera >= 34
- Safari >= 8
Simple example
import React from "react"; import ReactDOM from "react-dom"; import { ContextMenu, MenuItem, ContextMenuTrigger } from "react-contextmenu"; function handleClick(e, data) { console.log(data.foo); } function MyApp() { return ( <div> {/* NOTICE: id must be unique between EVERY <ContextMenuTrigger> and <ContextMenu> pair */} {/* NOTICE: inside the pair, <ContextMenuTrigger> and <ContextMenu> must have the same id */} <ContextMenuTrigger id="same_unique_identifier"> <div className="well">Right click to see the menu</div> </ContextMenuTrigger> <ContextMenu id="same_unique_identifier"> <MenuItem data={{foo: 'bar'}} onClick={this.handleClick}> ContextMenu Item 1 </MenuItem> <MenuItem data={{foo: 'bar'}} onClick={this.handleClick}> ContextMenu Item 2 </MenuItem> <MenuItem divider /> <MenuItem data={{foo: 'bar'}} onClick={this.handleClick}> ContextMenu Item 3 </MenuItem> </ContextMenu> </div> ); } ReactDOM.render(<MyApp myProp={12}/>, document.getElementById("main"));
see usage docs / examples for more details.
For Changelog, see releases
MIT. Copyright(c) Vivek Kumar Bansal