Flash messages with Hotwire

#rails #hotwire #tutorial #stimulus

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>

`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 %>

`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();
  }
}