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();
}
}
Top comments (5)
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?
More content covers turbo stream and drive.
Also, can I use turbo for nested comments? Such as 'dev.io' forum?
Awesome...
I dont have a helper method "classes_for_flash(key)"
That is great. Thank you