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 Hotwire Native-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
  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/hotwire-native-bridge"

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.

Bridge Elements

The BridgeElement class lets you easily use bridge-specific data and behaviors on elements in your components. You can wrap any element in a new BridgeElement(myElement) within your bridge components to access the following:

﹟ Data Attributes

The following data attributes can be applied to any element accessed via the BridgeElement class:

The following data attributes can be applied to elements associated with a data-controller and a BridgeComponent class: