5.1.1 • Published 1 year ago
@firefox-devtools/react-contextmenu v5.1.1
React Contextmenu
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.
Table of contents
Installation
Using npm
npm install --save @firefox-devtools/react-contextmenu
Using yarn
yarn add @firefox-devtools/react-contextmenu
Browser Support
- Edge >= 94
- FireFox >= 91 and 78
- Chrome >= 92
- Opera >= 79
- Safari >= 13.1
Usage
Simple example
import React from "react";
import ReactDOM from "react-dom";
import { ContextMenu, MenuItem, ContextMenuTrigger } from "@firefox-devtools/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.
API
FAQs
Who's using react-contextmenu?
Contributors
Changelog
For Changelog, see releases For the changelog from before the fork, see releases
License
MIT. Copyright(c) Vivek Kumar Bansal