This is a small React package that helps you with setting up context menus (the ones that appear when you right click).
Note: This library is in early development and may not work properly in all environments.
- Multiple contexts
- Nested contexts
- Menu doesn't overflow page at borders
- Fully customizable
To install this package, simply run npm i @printy/react-context-menu
To create a context menu area (area in which the context menu will be allowed to
activate), import and create a <ContextMenuContainer /> component. If you
want to apply the context to an already existing element, simply add
<ContextMenuContainer /> inside it and it will automatically stretch to the
size of its container
You must pass a single prop menu which specifies the component to render as the context menu.
This package focuses on helping with the functionality and behavior of a context menu, not appearance. As such, you will have to create the menu component yourself. But I have added a basic <Menu/> component that you can use as a baseline.
The <Menu/> component accepts a single prop options, which is an array of objects with properties label and onClick. label is the label that will appear on the menu item, and onClick is the event handler for clicking on the item.
You can create multiple <ContextMenuContainer/>s each with their own menu component, and you can also nest multiple <ContextMenuContainer/>s
If you want to contribute, you can submit bug reports or add new features and submit a PR. Before starting work on a new branch, please share your idea in the repo's issues section and have it approved (it will most likely get approved even if it's a crazy idea)
For any questions or issues feel free to submit an issue on the repo