@vikadata/react-contexify
v5.0.5
Published
Add contextmenu to your react component with ease
Downloads
156
Readme
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.css';
const MENU_ID = 'blahblah';
function App() {
const { show } = useContextMenu({
id: MENU_ID,
});
function handleContextMenu(event){
event.preventDefault();
show({
event,
props: {
key: 'value'
}
})
}
const handleItemClick = ({ event, props }) => console.log(event,props);
return (
<div>
<p onContextMenu={handleContextMenu}>lorem ipsum blabladhasi blaghs blah</p>
<Menu id={MENU_ID}>
<Item onClick={handleItemClick}>Item 1</Item>
<Item onClick={handleItemClick}>Item 2</Item>
<Separator />
<Item disabled>Disabled</Item>
<Separator />
<Submenu label="Foobar">
<Item onClick={handleItemClick}>Sub Item 1</Item>
<Item onClick={handleItemClick}>Sub Item 2</Item>
</Submenu>
</Menu>
</div>
);
}
Contribute
Any idea and suggestions are welcome. Please have a look at the contributing guide.
License
React Contexify is licensed under MIT.