React components for displaying configurable context menus
- View examples and docs at use-context-menu.vercel.app
- Fork this Code Sandbox to get started
Context menu item.
<ContextMenuItem onSelect={copy}>Copy text</ContextMenuItem>| Name | Description |
|---|---|
| children | Menu item name. |
| onSelect | Callback notified when menu item is selected. |
| Name | Description |
|---|---|
| className | CSS className. |
| data-testid | Test id. ℹ️ Test id can be used to narrow selection when unit testing. |
| disabled | Disable menu item. |
| style | CSS style. |
Context menu category header.
<ContextMenuCategory>Main</ContextMenuCategory>| Name | Description |
|---|---|
| children | Category label. |
| Name | Description |
|---|---|
| className | CSS className. |
| style | CSS style. |
Separator rendered between context menu sections.
None
| Name | Description |
|---|---|
| className | CSS className. |
| style | CSS style. |
import { ContextMenuItem, useContextMenu } from "use-context-menu";
// You can import this anywhere, just so long as it's imported once
import "use-context-menu/styles.css";
function Example({ className }: { className: string }) {
const { contextMenu, onContextMenu, onKeyDown } = useContextMenu(
<>
<ContextMenuItem onSelect={selectOne}>One</ContextMenuItem>
<ContextMenuItem onSelect={selectTwo}>Two</ContextMenuItem>
<ContextMenuItem onSelect={selectThree}>Three</ContextMenuItem>
</>
);
return (
<>
<button onContextMenu={onContextMenu} onKeyDown={onKeyDown} tabIndex={0}>
right-click me
</button>
{contextMenu}
</>
);
}If you like this project, 🎉 become a sponsor or ☕ buy me a coffee
CSS styles must be explicitly imported/required for this package:
import "use-context-menu/styles.css";
