Features
- Easy to set up for real, you can make it work in less than 10sec!
- Super easy to customize thanks to css variables 💅
- Custom position
- Sub menu support
- Does not go offscreen
- Dark mode 🌒
- Keyboard navigation + keyboard shortcut!
- Built-in animations
- Easy to test!
- Written in Typescript 💪
- Tiny! (3k gzipped)
Check the documentation for more!
Documentation
Go here.
Installation
Using yarn
$ yarn add react-contexifyUsing npm
$ npm install --save react-contexifyThe gist
import { Menu, Item, Separator, Submenu, useContextMenu } from 'react-contexify';
import 'react-contexify/ReactContexify.css';
const MENU_ID = 'blahblah';
function App() {
const { show } = useContextMenu({
id: MENU_ID,
});
function handleContextMenu(event){
show({
event,
props: {
key: 'value'
}
})
}
// I'm using a single event handler for all items
// but you don't have too :)
const handleItemClick = ({ id, event, props }) => {
switch (id) {
case "copy":
console.log(event, props)
break;
case "cut";
console.log(event, props);
break;
//etc...
}
}
return (
<div>
<p onContextMenu={handleContextMenu}>lorem ipsum blabladhasi blaghs blah</p>
<Menu id={MENU_ID}>
<Item id="copy" onClick={handleItemClick}>Copy</Item>
<Item id="cut" onClick={handleItemClick}>Cut</Item>
<Separator />
<Item disabled>Disabled</Item>
<Separator />
<Submenu label="Foobar">
<Item id="reload" onClick={handleItemClick}>Reload</Item>
<Item id="something" onClick={handleItemClick}>Do something else</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.