ContextMenu
ContextMenu is a context menu build on React (16.8+) hooks. ContextMenu provides a quick and easy way to create instant context menus without having to build jsx. This component supports submenus, custom component menu items, and edge detection.
Installation
Using npm:
$ npm i contextmenu
How To Use
Import:
import useContextMenu from 'contextmenu';import 'contextmenu/ContextMenu.css';
Build out your menu:
const menuConfig = console 'Disabled': null 'JSX line': <hr></hr> 'JSX': <div =>yes</div> 'Line': '---' 'Submenu': console 'Go deeper': console 'Submenu 2': 'electric': consolelog console ;
Render your menu in your component:
const contextMenu useCM = ; return <div =>...contextMenu</div>
API
ContextMenu is built off hooks, which means you must render it within React functional components.
useContextMenu(props)
props
is optionalprops
shape:
{
submenuSymbol: jsx; // which means jsx component or string or null
depth: number;
// more to be added later
}
contextMenu
- Returned from
useContextmenu()
which contains theReact.portal
to be rendered (ontodocument.body
) - Must be in your render function, anywhere.
useCM(menuConfig)
menuConfig
is a JSON that determines what the rendered context menu looks like.- menuConfig shape:
{
[menu option name] :
| [option callback]
| [menuConfig]
| [jsx]
| "-----"
| null
}
- [menu option name] is used in conjection with [option callback] to create an option that does something
- [menu option name] is used in conjection with another
menuConfig
to create a submenu - [menu option name] is used with
null
when the item is disabled - [jsx] shows custom renderings inside menu options ([menu option name] is unused here)
- "---" is a shortcut to display a separation line between menu items ([menu option name] is unused)