🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A customizable, multi-level React context menu component which can be implemented on multiple targets.

Navigation_Menu React

Documentation

!!! Looking for maintainers !!!

NPM version Build Status Dependency Status Dev Dependency Status Code Climate

NPM

React Contextmenu

ContextMenu in React with accessibility support. Live Examples can be found here

Table of contents

Installation

Using npm

npm 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 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>        <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.

API

API docs

FAQs

ALL FAQs

Who's using react-contextmenu?

Contributors

All Contributors

Changelog

For Changelog, see releases

License

MIT. Copyright(c) Vivek Kumar Bansal


You May Also Like