This repository was archived by the owner on Sep 1, 2020. It is now read-only.

vkbansal/react-contextmenu

Repository files navigation

NPM versionBuild StatusDependency StatusDev Dependency StatusCode Climate

NPM

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

Using npm

npm install --save react-contextmenu

Using yarn

yarn add react-contextmenu
  • IE 11 and Edge >= 12
  • FireFox >= 38
  • Chrome >= 47
  • Opera >= 34
  • Safari >= 8

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 docs

ALL FAQs

All Contributors

For Changelog, see releases

MIT. Copyright(c) Vivek Kumar Bansal

About

Project is no longer maintained

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 67