screenshot 2018εΉ΄10ζ31ζ₯ at 13 32 57
React-contexify CI npm npm license
- 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!
Go here.
Using yarn
$ yarn add react-contexify
Using npm
$ npm install --save react-contexify
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> ); }
Any idea and suggestions are welcome. Please have a look at the contributing guide.
React Contexify is licensed under MIT.