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

<!DO…


This content originally appeared on DEV Community and was authored by Pete Hawkins

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


This content originally appeared on DEV Community and was authored by Pete Hawkins


Print Share Comment Cite Upload Translate Updates
APA

Pete Hawkins | Sciencx (2021-10-02T15:35:30+00:00) Flash messages with Hotwire. Retrieved from https://www.scien.cx/2021/10/02/flash-messages-with-hotwire/

MLA
" » Flash messages with Hotwire." Pete Hawkins | Sciencx - Saturday October 2, 2021, https://www.scien.cx/2021/10/02/flash-messages-with-hotwire/
HARVARD
Pete Hawkins | Sciencx Saturday October 2, 2021 » Flash messages with Hotwire., viewed ,<https://www.scien.cx/2021/10/02/flash-messages-with-hotwire/>
VANCOUVER
Pete Hawkins | Sciencx - » Flash messages with Hotwire. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/02/flash-messages-with-hotwire/
CHICAGO
" » Flash messages with Hotwire." Pete Hawkins | Sciencx - Accessed . https://www.scien.cx/2021/10/02/flash-messages-with-hotwire/
IEEE
" » Flash messages with Hotwire." Pete Hawkins | Sciencx [Online]. Available: https://www.scien.cx/2021/10/02/flash-messages-with-hotwire/. [Accessed: ]
rf:citation
» Flash messages with Hotwire | Pete Hawkins | Sciencx | https://www.scien.cx/2021/10/02/flash-messages-with-hotwire/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts