action-view

Usage

Define an array of action configurations outside your React component and pass it into the ActionView component.

Features

• Flexible onClick handlers:
  Each action supports synchronous or asynchronous onClick handlers, enabling API calls, animations, or other side effects.

• Customizable layout:
  Control the orientation with the layout prop. Options: "vertical" or "horizontal".

• Overflow control:
  Use the maxVisible prop to specify how many buttons are shown before the rest overflow into a dropdown menu.

Example

import { ActionView } from "action-view";
import type { ClickAction } from "action-view";

const actions: ClickAction[] = [
  {
    label: "Edit",
    onClick: async () => {
      console.log("Edit clicked");
      await new Promise((res) => setTimeout(res, 500)); // async example
    },
    type: "primary",
  },
  {
    label: "Delete",
    onClick: () => {
      console.log("Delete clicked");
    },
    danger: true,
  },
];

function Example() {
  return (
    <ActionView
      actions={actions}
      maxVisible={2} // Show only 2 buttons, rest in overflow dropdown
    />
  );
}