Context Menu implemented in Re

Project is no longer maintained

React Contextmenu react实现的右键菜单

ContextMenu in React with accessibility support. Live Examples can be found here 查看案例

Table of contents 目录 Installation Browser Support Usage API FAQs Contributors Changelog License Installation 安装教程

Using npm

npm install --save rc-contextmenu

Using yarn

yarn add rc-contextmenu Browser Support 支持的浏览器 IE 11 and Edge >= 12 FireFox >= 38 Chrome >= 47 Opera >= 34 Safari >= 8 Usage DEMO

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.

API

API docs

FAQs

ALL FAQs

Who's using react-contextmenu? react-data-grid teamup.com Spotify Web Player Contributors

All Contributors

Changelog

For Changelog, see releases

License

MIT. Copyright(c) Vivek Kumar Bansal