Skip to content
Context Menu implemented in React
Branch: master
Clone or download
vkbansal Merge pull request #264 from zmayor/master
enhanced submenu typescript definition
Latest commit 155f4fc Mar 25, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
docs #240 Oct 30, 2018
examples Add rtl prop to the ContextMenu Component Oct 17, 2018
src enhanced submenu typescript definition Mar 21, 2019
tests Add rtl prop to the ContextMenu Component Oct 17, 2018
.babelrc remove react-hmre and use static server instead Feb 20, 2017
.codeclimate.yml exclude markdown files Aug 4, 2017
.editorconfig
.eslintignore
.eslintrc.yml Lint Fixes Mar 26, 2017
.gitignore Updated gitignore Jul 24, 2018
.travis.yml update travis deploy settings Apr 6, 2018
CONTRIBUTING.md Add contibuting.md Mar 31, 2017
ISSUE_TEMPLATE.md use jsfiddle with recent versions (#175) Dec 8, 2017
LICENSE.md init Jul 4, 2015
README.md Update README.md Feb 5, 2019
deploy.sh
package-lock.json 2.11.0 Mar 18, 2019
package.json
webpack.config.js

README.md

!!! 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 can’t perform that action at this time.