tarve
Docs GitHub

ContextMenu

A right-click menu attached to a region.

ContextMenuProps packages/core/src/popups.ts:375 ↗

Import

import { ContextMenu } from "@tarve/core";

Usage

ContextMenu.tsx
import { ContextMenu, Text, View } from "@tarve/core";

let open = false;

<ContextMenu
  id="canvas-menu"
  open={open}
  trigger={
    <View padding={40}>
      <Text>Right-click here</Text>
    </View>
  }
  items={[
    { value: "copy", label: "Copy", shortcut: "Ctrl+C" },
    { value: "paste", label: "Paste", shortcut: "Ctrl+V" },
  ]}
  onOpenChange={(next) => {
    open = next;
  }}
  onSelect={(value) => console.log(value)}
/>

Props

PropTypeDefault
id required string—
items required readonly DropdownMenuItem[]—
open required boolean—
trigger required Child—
contentStyle Style—
disabled booleanfalse
label string—
onOpenChange (open: boolean) => void—
onSelect (value: string) => void—
side PopupSide"bottom"

Common props

Shared by every component. See descriptions →

childrenhighlightkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

DropdownMenuItem
interface DropdownMenuItem {
  value: string;
  label: string;
  icon?: IconName;
  shortcut?: string;
  disabled?: boolean;
  checked?: boolean;
}
PopupSide
type PopupSide = "top" | "right" | "bottom" | "left";