ContextMenu in React with accessibility support. Live Examples can be found here
This is a fork from the original project for use with the firefox profiler. We don't intend to add new features but will fix issues with the existing code, and sometimes change it for our usage. We hope it can be useful for more projects.
Thanks Vivek Kumar Bansal for all the good work put in this project.
Using npm
npm install --save @firefox-devtools/react-contextmenu Using yarn
yarn add @firefox-devtools/react-contextmenu - Edge >= 94
- FireFox >= 91 and 78
- Chrome >= 92
- Opera >= 79
- Safari >= 13.1
Simple example
importReactfrom"react";importReactDOMfrom"react-dom";import{ContextMenu,MenuItem,ContextMenuTrigger}from"@firefox-devtools/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 For the changelog from before the fork, see releases
MIT. Copyright(c) Vivek Kumar Bansal