More from Henry Kim

RSS

Custom turbo_stream action tag: highlight an updated element

6851 views

0 comments

                  <turbo-stream action="highlight" target="<%= dom_id(@project) %>">
  <template>
    <%= render @project %>
  </template>
</turbo-stream>

                  export function highlight({ target, template }) {
  target.replaceWith(template)

  const el = document.getElementById(target.id)
  if (!el) return

  el.classList.add("ring", "ring-yellow-300")
  setTimeout(() => el.classList.remove("ring", "ring-yellow-300"), 900)
}

                  import { Turbo } from "@hotwired/turbo-rails"
import { highlight } from "./turbo_stream_actions/highlight"

Turbo.StreamActions.highlight = function () {
  highlight({
    target: this.targetElement,
    template: this.templateContent.firstElementChild
  })
}

Turbo gives you a handful of built-in stream actions (append, replace, remove), but sometimes you want behavior like “replace then highlight”. You can implement this as a custom action: send a turbo-stream with action='highlight' and include a template with the element to highlight. The client-side action can add a class and remove it after a timeout. The nice part is that your server code stays expressive: it declares the UI intent (“highlight this”), not the mechanics. I use this for “saved” indicators, updated rows, and incoming notifications. It’s still progressive: if the action isn’t registered, the stream is ignored, but the underlying data remains correct.

Henry Kim

More from Henry Kim

Custom turbo_stream action tag: highlight an updated element

0 Comments

More from Henry Kim