Skip to content

Bridge Components

Web Components

The BridgeComponent class is an extension of a Stimulus Controller. You have everything available in a standard Controller in addition to the following Strada-specific bridge functionality:

For example, to create a "form" component that displays a native submit button in your native app, you’d add the following controller, target, and title attributes to your web <form>:


<!-- form elements -->


Submit Form


Next, create a BridgeComponent with named "form" that sends a message to the native component with data that contains the form’s submitTitle. Provide a callback to run when the native component replies to the message.

// bridge/form_controller.js

import { BridgeComponent, BridgeElement } from "@hotwired/strada"

export default class extends BridgeComponent {
static component = "form"
static targets = [ "submit" ]

submitTargetConnected(target) {
const submitButton = new BridgeElement(target)
const submitTitle = submitButton.title

this.send("connect", { submitTitle }, () => {

Note: It’s recommended to place your bridge components in a /bridge subdirectory where your Stimulus controllers live to make them easily identifiable and isolated from your other Stimulus controllers.

Native Components

See the documentation for building the corresponding native components in the hotwired/strada-ios and hotwired/strada-android repos.

Next: Elements