Skip to main content
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.

​
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"
            }
        })
    })
}

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