Skip to content

VolumeGraphics/react-contexify

Β 
Β 

Repository files navigation

screenshot 2018-10-31 at 13 32 57

React-contexify CI npm npm license

contexify

Features

  • Easy to set up for real, you can make it work in less than 10sec!
  • Super easy to customize thanks to css variables πŸ’…
  • Custom position
  • Sub menu support
  • Does not go offscreen
  • Dark mode πŸŒ’
  • Keyboard navigation + keyboard shortcut!
  • Built-in animations
  • Easy to test!
  • Written in Typescript πŸ’ͺ
  • Tiny! (3k gzipped)

Check the documentation for more!

Documentation

Go here.

Installation

Using yarn

$ yarn add react-contexify

Using npm

$ npm install --save react-contexify

The gist

import { Menu, Item, Separator, Submenu, useContextMenu } from 'react-contexify';
import 'react-contexify/ReactContexify.css';

const MENU_ID = 'blahblah';

function App() {
  const { show } = useContextMenu({
    id: MENU_ID,
  });

  function handleContextMenu(event){
      show({
        event,
        props: {
            key: 'value'
        }
      })
  }

  // I'm using a single event handler for all items
  // but you don't have too :)
  const handleItemClick = ({ id, event, props }) => {
    switch (id) {
      case "copy":
        console.log(event, props)
        break;
      case "cut";
        console.log(event, props);
        break;
      //etc...
    }
  }

  return (
    <div>
    <p onContextMenu={handleContextMenu}>lorem ipsum blabladhasi blaghs blah</p>  
    <Menu id={MENU_ID}>
      <Item id="copy" onClick={handleItemClick}>Copy</Item>
      <Item id="cut" onClick={handleItemClick}>Cut</Item>
      <Separator />
      <Item disabled>Disabled</Item>
      <Separator />
      <Submenu label="Foobar">
        <Item id="reload" onClick={handleItemClick}>Reload</Item>
        <Item id="something" onClick={handleItemClick}>Do something else</Item>
      </Submenu>
    </Menu>
    </div>
  );
}

Contribute

Any idea and suggestions are welcome. Please have a look at the contributing guide.

License

React Contexify is licensed under MIT.

About

πŸ‘Œ Add a context menu to your react app with ease

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 86.9%
  • SCSS 10.4%
  • JavaScript 1.1%
  • Other 1.6%