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

Discussion (4)

Collapse
phawk profile image
Pete Hawkins Author

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
cuneyter profile image
cuneyter

That is great. Thank you