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:

• static component: The unique name of the component. This must match the name you use for the corresponding native component.
• this.platformOptingOut: Specifies whether the controller is opted out for the current platform using the data-controller-optout-<platform> attribute.
• this.enabled: Specifies whether the component is enabled and supported by the current version of the native app.
• this.bridgeElement: Provides this.element for the component instance wrapped in a BridgeElement.
• this.send(event, data = {}, callback): Sends a message to the native component with the event name, optional JSON data, and a callback to be run when the native component replies to the message.

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
  method="post"
  data-controller="bridge--form">

  <!-- form elements -->

  <button
    class="button"
    type="submit"
    data-bridge--form-target="submit"
    data-bridge-title="Submit">
    Submit Form
  </button>

</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 }, () => {
      target.click()
    })
  }
}

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