Context menu

ContextMenu opens DropdownMenu's menu at the pointer: a right-click on its area, a long press on touch, or Shift+F10 or the Menu key on what's focused in it. It flips to stay on screen, takes the same arrow keys, and closes on Escape, a press outside or a scroll. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

import "@/components/dithercharts/controls.css"
import { ContextMenu } from "@/components/dithercharts/context-menu"

<ContextMenu
  label="Chart actions"
  items={[
    { label: "Copy as PNG", onSelect: copyPng },
    { label: "Export CSV", onSelect: exportCsv },
    { label: "Remove from dashboard", onSelect: remove, disabled: !canEdit },
  ]}
>
  <BarChart data={data} />
</ContextMenu>

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add context-menu

Props

It renders a native element, so every other attribute that element takes passes through.