Skip to main content
The useAction function returns a callback that allows components to trigger named actions with optional props. This enables communication between BindJS components and the host application. 
const action = useAction()

​
Parameters

None

​
Returns

Returns an action dispatch function that accepts an options object:
  • name - The name of the action to trigger
  • props - Optional properties to pass with the action
(options: { name: string; props?: Record<string, string> }) => void

​
Usage

​
Basic action dispatch

defineComponent({
    body: () => {
        const action = useAction()
        
        return VStack([
            Button("Submit", () => {
                action({ name: "submit" })
            }),
            Button("Cancel", () => {
                action({ name: "cancel" })
            })
        ])
    }
})

​
Action with props

defineComponent({
    body: () => {
        const action = useAction()
        const [selectedItem, setSelectedItem] = useState(null)
        
        return VStack([
            Button("Select Item", () => {
                action({ 
                    name: "itemSelected",
                    props: { 
                        itemId: selectedItem.id,
                        itemName: selectedItem.name 
                    }
                })
            })
        ])
    }
})

​
Analytics or tracking events

defineComponent({
    body: () => {
        const action = useAction()
        
        return VStack([
            Button("Purchase", () => {
                // Trigger analytics event
                action({ 
                    name: "trackEvent",
                    props: { 
                        event: "purchase_clicked",
                        category: "ecommerce"
                    }
                })
                
                // Continue with purchase logic...
            })
        ])
    }
})

defineComponent({
    body: () => {
        const action = useAction()
        
        return VStack([
            Button("Visit Website", () => {
                action({ 
                    name: "openURL",
                    props: { 
                        url: "https://example.com" 
                    }
                })
            }),
            Button("Contact Support", () => {
                action({ 
                    name: "openURL",
                    props: { 
                        url: "mailto:[email protected]" 
                    }
                })
            })
        ])
    }
})

​
Notes

  • The actual action handling depends on the host application or runtime environment
  • Actions are typically used for communication between BindJS components and native code
  • Common use cases include analytics, deep linking, opening URLs, and triggering native functionality
  • The host application must register action handlers to respond to dispatched actions

​
See Also