> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# useAction

> Returns an action dispatch function for triggering host-app-defined side effects.

```typescript theme={null}
useAction(): (options: { name: string; props?: Record<string, string> }) => void;
```

## Returns

A function that dispatches an action to the host app. Use this for side effects like analytics events, deep links, or native integrations.

<ParamField path="options" type="object" required>
  Action options.

  <Expandable title="options fields">
    <ParamField path="name" type="string" required>
      The action identifier. Defined by the host app; determines what side effect is triggered.
    </ParamField>

    <ParamField path="props" type="Record<string, string>" optional>
      Key-value pairs passed as parameters to the action handler.
    </ParamField>
  </Expandable>
</ParamField>

## Usage

### Track an analytics event

```typescript theme={null}
const body = (props) => {
    const action = useAction()

    return Button("Buy Now", () => {
        action({ name: "purchase", props: { productId: props.id } })
    })
}
```

### Add to cart

```typescript theme={null}
const body = (props) => {
    const action = useAction()

    return Button("Add to Cart", () => {
        action({
            name: "addToCart",
            props: {
                productId: props.productId,
                quantity: "1"
            }
        })
    })
}
```

### Trigger a deep link

```typescript theme={null}
const body = () => {
    const action = useAction()

    return Button("Open Settings", () => {
        action({ name: "deepLink", props: { url: "myapp://settings" } })
    })
}
```

## Notes

* `useAction` must be called inside a component `body` function, not at the top level.
* Actions are fire-and-forget. There is no return value or callback for completion.
* The host app defines which action names are supported and how they are handled.
* All prop values must be strings.

## See Also

* [useNavigate](/bindjs/functions/useNavigate) -- programmatic navigation