Resources

Download Source Code

Summary

# Terminal
rails g helper TurboStreams::Toast
rails g helper TurboStreams::Log
yarn add toastify-js

# views/welcome/index.html.erb
<turbo-stream action="toast" message="Hello World"></turbo-stream>

# app/javascript/application.js
import "./turbo_streams"

# app/javascript/turbo_streams/index.js
import "./toast"
import "./log"

# app/assets/stylesheets/application.bootstrap.scss
@use "toastify-js/src/toastify.css";

# app/javascript/turbo_streams/toast.js
import { StreamActions } from "@hotwired/turbo"
import Toastify from "toastify-js"

StreamActions.toast = function() {
  const message = this.getAttribute("message")
  const position = this.getAttribute("position")
  Toastify({
    text: message,
    duration: 3000,
    destination: "",
    close: true,
    gravity: "top",
    position: position,
    stopOnFocus: true,
    style: {
      background: "linear-gradient(to right, #00b09b, #96c93d)",
    }
  }).showToast()
}

# app/javascript/turbo_streams/log.js
import { StreamActions } from "@hotwired/turbo"

StreamActions.log = function() {
  const message = this.getAttribute("message")
  console.log(message)
}

# app/helpers/turbo_streams/toast_helper.rb
module TurboStreams::ToastHelper
  def toast(message, position: "left")
    turbo_stream_action_tag :toast, message: message, position: position
  end
end
Turbo::Streams::TagBuilder.prepend(TurboStreams::ToastHelper)

# app/helpers/turbo_streams/log_helper.rb
module TurboStreams::LogHelper
  def log(message)
    turbo_stream_action_tag :log, message: message
  end
end
Turbo::Streams::TagBuilder.prepend(TurboStreams::LogHelper)

# welcome_controller.rb
class WelcomeController < ApplicationController
  def index
  end

  def page1
    render turbo_stream: turbo_stream.toast("hello from a rails controller", position: :right)
  end

  def page2
    render turbo_stream: [
      turbo_stream.log("log from page 2"),
      turbo_stream.toast("hello from page 2", position: :left),
      turbo_stream.toast("hello from page 2 and this is a second toast", position: :right),
    ]
  end
end

# models/user.rb
class User < ApplicationRecord
  include Turbo::Streams::ActionHelper
  include Turbo::Streams::StreamName

  after_create -> {
    content = turbo_stream_action_tag(:toast, message: "A new user was created")
    ActionCable.server.broadcast(stream_name_from(:users), content)
  }
end

# views/users/index.html.erb
<%= turbo_stream_from :users %>