context-menu-kit

A lightweight UI kit for customizable context menus.

Features

• Headless architecture
• React support
• Multiple context menu regions
• Different menus for different regions
• Different UI for different regions
• Built-in default renderer
• Fully customizable rendering

Installation

pnpm add @context-menu-kit/react

Quick Start

import { ContextMenu, ContextMenuProvider } from "@context-menu-kit/react"

const items = [
  {
    id: "copy",
    label: "Copy"
  },
  {
    id: "paste",
    label: "Paste"
  }
]

export function App() {
  return (
    <ContextMenuProvider>
      <ContextMenu items={items}>
        <div>Right Click Me</div>
      </ContextMenu>
    </ContextMenuProvider>
  )
}

Custom Item Renderer

<ContextMenu
  items={items}
  renderItem={({ item, close }) => (
    <button
      onClick={() => {
        item.onClick?.(item)
        close()
      }}
    >
      {item.label}
    </button>
  )}
>
  <div>Right Click Me</div>
</ContextMenu>

Custom Menu Renderer

<ContextMenu
  items={items}
  renderBody={({ items, close }) => (
    <div>
      {items.map((item) => (
        <button
          key={item.id}
          onClick={() => {
            item.onClick?.(item)
            close()
          }}
        >
          {item.label}
        </button>
      ))}
    </div>
  )}
>
  <div>Right Click Me</div>
</ContextMenu>

Monorepo Structure

packages/
├─ core
├─ react
├─ vue
└─ dom

Roadmap

• [x] React
• [ ] Vue
• [ ] DOM
• [ ] Keyboard Navigation

License

MIT