useAction - Metabind

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.

options

object

required

Action options.

Show options fields

name

string

required

The action identifier. Defined by the host app; determines what side effect is triggered.

props

Record<string, string>

Key-value pairs passed as parameters to the action handler.

Usage

Track an analytics event

const body = (props) => {
    const action = useAction()

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

Add to cart

const body = (props) => {
    const action = useAction()

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

Trigger a deep link

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.

​Returns

​Usage

​Track an analytics event

​Add to cart

​Trigger a deep link

​Notes

​See Also