Package Exports
- @naumandev/react-context-menu
- @naumandev/react-context-menu/es6/index.js
- @naumandev/react-context-menu/modules/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@naumandev/react-context-menu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
React Contextmenu for react 18
Forked from vkbansal.github.io/react-contextmenu/ ContextMenu in React with accessibility support. Live Examples can be found here updated version for react 18
Table of contents
Installation
Using npm
npm install --save react-contextmenuUsing yarn
yarn add react-contextmenuUsage
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.