A fully configurable context menu (right-click menu) and dropdown (left-click menu) component for React.
How to use it:
1. Installation.
# NPM $ npm i use-context-menu
2. Create a right-click menu.
export function Demo({ className }: { className: string }) { const { contextMenu, onContextMenu } = useContextMenu( <> <ContextMenuCategory>Section one</ContextMenuCategory> <ContextMenuItem>One</ContextMenuItem> <ContextMenuItem>Two</ContextMenuItem> <ContextMenuDivider /> <ContextMenuCategory>Section two</ContextMenuCategory> <ContextMenuItem>Three</ContextMenuItem> </> ); return ( <> <span className={className} onContextMenu={onContextMenu}> right-click me </span> {contextMenu} </> ); }
3. Create a left-click dropdown menu.
export function Demo({ className }: { className: string }) { const { contextMenu: menu, onContextMenu: onClick } = useContextMenu( <> <ContextMenuCategory>Section one</ContextMenuCategory> <ContextMenuItem>One</ContextMenuItem> <ContextMenuItem>Two</ContextMenuItem> <ContextMenuDivider /> <ContextMenuCategory>Section two</ContextMenuCategory> <ContextMenuItem>Three</ContextMenuItem> </> ); return ( <> <span className={className} onClick={onClick}> click me <Icon type="down-arrow" /> </span> {menu} </> ); }
Preview:
Download Details:
Author: bvaughn
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/bvaughn/use-context-menu
License: MIT