react-contexify-menu

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 } from 'react-contexify';
import 'react-contexify/dist/ReactContexify.min.css';
 
const onClick = ({ event, props }) => console.log(event,props);
 
// create your menu first
const MyAwesomeMenu = () => (
    <Menu id='menu_id'>
       <Item onClick={onClick}>Lorem</Item>
       <Item onClick={onClick}>Ipsum</Item>
       <Separator />
       <Item disabled>Dolor</Item>
       <Separator />
       <Submenu label="Foobar">
        <Item onClick={onClick}>Foo</Item>
        <Item onClick={onClick}>Bar</Item>
       </Submenu>
    </Menu>
);
 
const App = () => (
    <div>
        <MenuProvider id="menu_id" style={{ border: '1px solid purple', display: 'inline-block' }}>
            Right click me...
        </MenuProvider>
        <MyAwesomeMenu />
    </div>
);

To-Do

• Allow keyboard navigation
• Accessibility
• RTL support
• Add release notes

Browser Support

IE 11+ ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Contribute

Any idea and suggestions are welcome. There is a playground to help you start, just run yarn start.

License

React Contexify is licensed under MIT.