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

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";