@saleae/react-contexify
Version:
Add contextmenu to your react component with ease
81 lines (56 loc) • 2.89 kB
Markdown
<img width="645" alt="screenshot 2018-10-31 at 13 32 57" src="https://user-images.githubusercontent.com/5574267/47815610-1806fa00-dd51-11e8-981b-2f680244ae29.png">
 []() []() []() [](https://coveralls.io/github/fkhadra/react-contexify?branch=master)
## Documentation
Go [here](https://fkhadra.github.io/react-contexify).
## Installation
Using yarn
```sh
$ yarn add react-contexify
```
Using npm
```sh
$ npm install --save react-contexify
```
## The gist
```js
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.