Skip to content
This repository has been archived by the owner on Sep 1, 2020. It is now read-only.

vkbansal/react-contextmenu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

d9018db · Aug 11, 2020
Sep 8, 2017
Feb 10, 2020
Oct 17, 2018
Jul 6, 2020
Sep 3, 2019
Feb 20, 2017
Aug 4, 2017
Nov 19, 2015
Feb 24, 2017
Oct 25, 2019
Jul 24, 2018
Apr 6, 2018
Mar 31, 2017
Dec 8, 2017
Jul 4, 2015
Aug 11, 2020
Apr 6, 2018
Jun 5, 2020
Feb 7, 2017
Aug 2, 2020

Repository files navigation

Project is no longer maintained

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>
      {/* 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?

Contributors

All Contributors

Changelog

For Changelog, see releases

License

MIT. Copyright(c) Vivek Kumar Bansal