DEV Community

Cover image for Flash messages with Hotwire
Pete Hawkins
Pete Hawkins

Posted on • Updated on

Flash messages with Hotwire

I’ll show you how to add flash messages to Rails, using a simple stimulus controller to auto dismiss them and some basic styling with tailwind css.


Summary of what was done

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>

  <body class="text-gray-600">
    <%= render partial: "shared/flash" %>

    <!-- ... -->
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

app/views/shared/_flash.html.erb

<% flash.each do |key, value| %>
  <div data-controller="flash" class="flex items-center fixed top-5 right-5 <%= classes_for_flash(key) %> py-3 px-5 rounded-lg">
    <div class="mr-4"><%= value %></div>

    <button type="button" data-action="flash#dismiss">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>
<% end %>
Enter fullscreen mode Exit fullscreen mode

app/javascript/controllers/flash_controller.js

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  connect() {
    setTimeout(() => {
      this.dismiss();
    }, 5000);
  }

  dismiss() {
    this.element.remove();
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (5)

Collapse
 
phawk profile image
Pete Hawkins

I’ll be adding more Hotwire content to this series soon! Let me know if there is anything you would like to see built with Hotwire or Turbo?

Collapse
 
ahmednadar profile image
Ahmed Nadar

More content covers turbo stream and drive.
Also, can I use turbo for nested comments? Such as 'dev.io' forum?

Collapse
 
ahmednadar profile image
Ahmed Nadar

Awesome...

Collapse
 
justinmcodes profile image
jmarsh24 • Edited

I dont have a helper method "classes_for_flash(key)"

Collapse
 
cuneyter profile image
cuneyter

That is great. Thank you