Skip to main content

getMenuOptions

Returns the default card context menu items: Edit card, Duplicate card, and Delete card. Each item carries a built-in id that the ContextMenu wrapper automatically routes to the matching kanban action.

Use this as a starting point when you want to extend the menu with custom items without losing the defaults.

Usage​

import { getMenuOptions } from "@svar-ui/react-kanban";

getMenuOptions(): { id: string; text: string; icon: string }[];

Returns:

[
	{ id: "edit-card", text: "Edit card", icon: "wxi-edit" },
	{ id: "duplicate-card", text: "Duplicate card", icon: "wxi-content-copy" },
	{ id: "delete-card", text: "Delete card", icon: "wxi-delete" },
];

Built-in ids dispatch their store actions automatically even when passed through a custom options array. Custom ids are surfaced only through the onClick callback.

Example​

Use the defaults as-is:

import { useState } from "react";
import { Kanban, ContextMenu } from "@svar-ui/react-kanban";

function App() {
  const [api, setApi] = useState(null);

  return (
    <ContextMenu api={api}>
      <Kanban init={setApi} cards={cards} columns={columns} />
    </ContextMenu>
  );
}

Extend with a custom item:

import { useState } from "react";
import { Kanban, ContextMenu, getMenuOptions } from "@svar-ui/react-kanban";

const options = [
  ...getMenuOptions(),
  { id: "archive-card", text: "Archive", icon: "wxi-empty" },
];

function App() {
  const [api, setApi] = useState(null);

  const onClick = ({ action }) => {
    if (action.id === "archive-card") {
      api.exec("update-card", {
        id: action.context.id,
        card: { archived: true },
      });
    }
  };

  return (
    <ContextMenu api={api} options={options} onClick={onClick}>
      <Kanban init={setApi} cards={cards} columns={columns} />
    </ContextMenu>
  );
}