ホーム/コンポーネント/オーバーレイ/コンテキストメニュー ContextMenu

ContextMenu

任意の座標に表示するコンテキストメニューコンポーネント。右クリックやドロップダウンに使用。

import { ContextMenu } from "@blueai/ui"

Examples

Right-click example

<div onContextMenu={(e) => { e.preventDefault(); setMenu({ open: true, x: e.clientX, y: e.clientY }); }}>
  右クリックでメニュー表示
</div>
<ContextMenu
  open={menu.open}
  onClose={() => setMenu({ ...menu, open: false })}
  x={menu.x}
  y={menu.y}
  items={[
    { label: "コピー", onClick: () => {}, shortcut: "⌘C" },
    { label: "貼り付け", onClick: () => {}, shortcut: "⌘V" },
    { label: "削除", onClick: () => {}, danger: true, separator: true },
  ]}
/>

Props

Prop	Type	Default	Description
items*	ContextMenuItem[]	—	メニューアイテムの配列
open*	boolean	—	表示状態
onClose*	() => void	—	閉じるコールバック
x*	number	—	X座標
y*	number	—	Y座標

Types

ContextMenuItem

type ContextMenuItem = {
  label: string;
  onClick: () => void;
  icon?: ReactNode;
  shortcut?: string;
  danger?: boolean;
  separator?: boolean;
};