action-view/README.md

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

```tsx
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
    />
  );
}
```