Add a context menu to your react app with ease
Clone or download
Latest commit c0f6fb8 Oct 31, 2018

README.md

screenshot 2018-10-31 at 13 32 57

Build Status npm npm license Coverage Status

readme-ctx

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 Chrome Firefox Opera Safari Edge
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.