use-context-menu

React components for displaying configurable context menus

• View examples and docs at use-context-menu.vercel.app
• Fork this Code Sandbox to get started

Documentation

ContextMenuItem

Context menu item.

<ContextMenuItem onSelect={copy}>Copy text</ContextMenuItem>

Required props

Optional props

ContextMenuCategory

Context menu category header.

<ContextMenuCategory>Main</ContextMenuCategory>

Required props

Optional props

ContextMenuDivider

Separator rendered between context menu sections.

Required props

None

Optional props

Example

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

FAQs

Why is the context menu not styled?

CSS styles must be explicitly imported/required for this package:

import "use-context-menu/styles.css";