Skip to content

Project will only get security updates. 🔒⚡️

License

Notifications You must be signed in to change notification settings

jstarpl/react-contextmenu

This branch is 245 commits ahead of vkbansal/react-contextmenu:master.

Folders and files

NameName
Last commit message
Last commit date
Feb 26, 2024
Dec 7, 2021
Apr 25, 2022
Jun 14, 2024
Oct 20, 2022
Sep 14, 2021
Aug 4, 2017
Nov 19, 2015
Feb 24, 2017
Nov 30, 2021
Jul 24, 2018
Feb 26, 2024
Nov 25, 2021
Dec 8, 2017
Jul 4, 2015
Nov 25, 2021
Jun 12, 2024
Nov 30, 2021
Jun 12, 2024

Repository files navigation

React Contextmenu

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

This is a fork from the original project for use with the firefox profiler. We don't intend to add new features but will fix issues with the existing code, and sometimes change it for our usage. We hope it can be useful for more projects.

Thanks Vivek Kumar Bansal for all the good work put in this project.

Table of contents

Installation

Using npm

npm install --save @firefox-devtools/react-contextmenu

Using yarn

yarn add @firefox-devtools/react-contextmenu

Browser Support

  • Edge >= 94
  • FireFox >= 91 and 78
  • Chrome >= 92
  • Opera >= 79
  • Safari >= 13.1

Usage

Simple example

import React from "react";
import ReactDOM from "react-dom";
import { ContextMenu, MenuItem, ContextMenuTrigger } from "@firefox-devtools/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 For the changelog from before the fork, see releases

License

MIT. Copyright(c) Vivek Kumar Bansal

About

Project will only get security updates. 🔒⚡️

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 99.0%
  • Shell 1.0%