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
importReactfrom"react";importReactDOMfrom"react-dom";import{ContextMenu,MenuItem,ContextMenuTrigger}from"react-contextmenu";functionhandleClick(e,data){console.log(data.foo);}functionMyApp(){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 */}<ContextMenuTriggerid="same_unique_identifier"><divclassName="well">Right click to see the menu</div></ContextMenuTrigger><ContextMenuid="same_unique_identifier"><MenuItemdata={{foo: 'bar'}}onClick={this.handleClick}>
ContextMenu Item 1
</MenuItem><MenuItemdata={{foo: 'bar'}}onClick={this.handleClick}>
ContextMenu Item 2
</MenuItem><MenuItemdivider/><MenuItemdata={{foo: 'bar'}}onClick={this.handleClick}>
ContextMenu Item 3
</MenuItem></ContextMenu></div>);}ReactDOM.render(<MyAppmyProp={12}/>,document.getElementById("main"));see usage docs / examples for more details.
For Changelog, see releases
MIT. Copyright(c) Vivek Kumar Bansal