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.