!!! Looking for maintainers !!!
!NPM versionnpm-imagenpm-url
!Build Statustravis-imagetravis-url
!Dependency Statusdeps-imagedeps-url
!Dev Dependency Statusdev-deps-imagedev-deps-url
!Code Climateclimate-imageclimate-urlReact Contextmenu
ContextMenu in React with accessibility support. Live Examples can be found hereTable of contents
- Installation - Browser Support - Usage - API - FAQs - Contributors - Changelog - LicenseInstallation
Using npmnpm install --save react-contextmenu
Using yarn
yarn add react-contextmenu
Browser Support
- IE 11 and Edge >= 12
- FireFox >= 38
- Chrome >= 47
- Opera >= 34
- Safari >= 8
Usage
Simple exampleimport 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>
<ContextMenuTrigger id="some_unique_identifier">
<div className="well">Right click to see the menu</div>
</ContextMenuTrigger>
<ContextMenu id="some_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.