More from Henry Kim

RSS

Stimulus toast auto-dismiss for Turbo-appended notifications

13284 views

0 comments

                  <div data-controller="toast" data-toast-timeout-value="2500" class="rounded bg-gray-900 px-3 py-2 text-white">
  <div class="flex items-start justify-between gap-3">
    <div><%= message %></div>
    <button type="button" data-action="toast#close">✕</button>
  </div>
</div>

                  import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = { timeout: { type: Number, default: 2000 } }

  connect() {
    this.timer = setTimeout(() => this.close(), this.timeoutValue)
  }

  disconnect() {
    clearTimeout(this.timer)
  }

  close() {
    this.element.remove()
  }
}

When toasts are appended via Turbo Streams, they should self-dismiss without extra wiring. I attach a Stimulus controller to the toast element that schedules removal after a delay (and allows manual close). This means the server only needs to render a toast partial; the behavior comes along automatically. It also avoids memory leaks: when Turbo removes the toast element, Stimulus disconnects cleanly. I keep the controller generic: it reads timeout from a data value and has a close action. This pattern is a great example of how I blend Hotwire: Turbo for delivery of HTML fragments, Stimulus for tiny interactive behavior. Together, you get a polished UX without a JS framework.

Henry Kim

More from Henry Kim

Stimulus toast auto-dismiss for Turbo-appended notifications

0 Comments

More from Henry Kim