Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-mini-contextmenu with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactMiniContextmenu = require("react-mini-contextmenu")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-mini-contextmenu v0.0.3

A simple library to build context menu in React

React Mini Contextmenu

Minimal ContextMenu in React with accessibility support.

No External Dependiencies, pure react component.

Demo

Alt Text

Table of contents

Installation

Using npm

npm install --save react-mini-contextmenu

Using yarn

yarn add react-mini-contextmenu

Browser Support

  • IE 11 and Edge >= 12
  • FireFox >= 38
  • Chrome >= 47
  • Opera >= 34
  • Safari >= 8

Usage

import Contextmenu from "react-mini-contextmenu"
function Home() {

    const [event, setEvent] = useState(false);

    const buttonClicked = (e: MouseEvent | any) => {
      e.preventDefault();
      e.persist();
      // set Mouse event 
      setEvent(e);
    }

    const doAction = () => {
      alert('Done action, closing context menu');
      setEvent(false);
    }
  return (
    <div >
      <h1>Context Menu demo</h1>
          <ContextMenu event={event}> 
          <ul style={listStyle} className="menu-options">
            <li style={listItem} onClick={doAction} className="menu-option">Back</li>
            <li style={listItem} onClick={doAction} className="menu-option">Reload</li>
            <li style={listItem} onClick={doAction} className="menu-option">Save</li>
            <li style={listItem} className="menu-option">Save As</li>
          </ul>
      </ContextMenu>
    <button onContextMenu={buttonClicked}>Right Click Me</button>
    </div>
  );
}

Changelog

For Changelog, see releases

License

MIT. Copyright(c)

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free