🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

The Contexify component helps you add a context menu to your react application with ease. Installation: # Yarn yarn add react-contexify # NPM $ npm install react-contexify Preview:

Navigation_Menu React

Documentation

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.


You May Also Like