Skip to content

tanainc/react-contexify

 
 

Repository files navigation

screenshot 2018-10-31 at 13 32 57

React-contexify CI npm npm license

contexify

Documentation

Go here.

Installation

Using yarn

$ yarn add react-contexify

Using npm

$ npm install --save react-contexify

The gist

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

const MENU_ID = 'blahblah';

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

  function handleContextMenu(event){
      event.preventDefault();
      show(event, {
        props: {
            key: 'value'
        }
      })
  }
  const handleItemClick = ({ event, props }) => console.log(event,props);

  return (
    <div>
    <p onContextMenu={handleContextMenu}>lorem ipsum blabladhasi blaghs blah</p>  
    <Menu id={MENU_ID}>
      <Item onClick={handleItemClick}>Item 1</Item>
      <Item onClick={handleItemClick}>Item 2</Item>
      <Separator />
      <Item disabled>Disabled</Item>
      <Separator />
      <Submenu label="Foobar">
        <Item onClick={handleItemClick}>Sub Item 1</Item>
        <Item onClick={handleItemClick}>Sub Item 2</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

Packages

No packages published

Languages

  • TypeScript 87.1%
  • SCSS 8.7%
  • JavaScript 2.7%
  • Other 1.5%