@cr4zyc4t/react-contextmenu

Context Menu implemented in React

Usage no npm install needed!

<script type="module">
  import cr4zyc4tReactContextmenu from 'https://cdn.skypack.dev/@cr4zyc4t/react-contextmenu';
</script>

README

This is a fork of React ContextMenu

This fork support:

  • config to use left click or right click to trigger context menu
  • renderTag could be a function component with forwardRef

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