react-contextmenu

Context Menu implemented in React.

Programming language: JavaScript

License: MIT License

Tags: UI Components     Menu     React     React-component     Reactjs     Contextmenu     Rightclick    

Latest version: v2.14.0

README

Project is no longer maintained

React Contextmenu

ContextMenu in React with accessibility support. Live Examples can be found [here](//vkbansal.github.io/react-contextmenu/)

Table of contents

• Installation
• Browser Support
• Usage
• API
• FAQs
• Contributors
• Changelog
• License

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>
      {/* 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](./docs/usage.md) / [examples](./examples) for more details.

API

[API docs](./docs/api.md)

FAQs

[ALL FAQs](./docs/faq.md)

Who's using react-contextmenu?

• react-data-grid
• teamup.com
• Spotify Web Player

Contributors

All Contributors

Changelog

For Changelog, see releases

License

[MIT](./LICENSE.md). Copyright(c) Vivek Kumar Bansal