Toastr, a Perfect Flash Message Alternative for Rails

Toastr, a Perfect Flash Message Alternative for Rails

Uduak Essien's photo
Uduak Essien
·Aug 2, 2020·

4 min read

I am going to spare you the drama of onboarding you with what flash messages are in rails. Hmm! Okay, just a bit of it so I form my intro.

Here you are, a classic definition: A flash message is a way to communicate information with the users of your Rails application so they can know what happens as a result of their actions.

The code snippet below shows an action that takes place in the controller. if is true we redirect the user to the post_path with a flash notice of 'Saved...' otherwise an alert message of 'Something went wrong` redirecting the user back to the same posts_path.

def create
        @post =
            if params[:images]
                params[:images].each do |img|

            redirect_to posts_path
            flash[:notice] = "Saved ..."   #there you are!!!
            flash[:alert] = "Something went wrong ..."   # ah! again, there you are!!!
            redirect_to posts_path

Here is the code you add to the view template where you want the flash message to display.

  <p class="flash"><%= flash.notice %></p>
  <p class="flash"><%= flash.alert %></p>

Enough of Flash, let's talk about why you opened this article in the first place, a suitable or perfect alternative to displaying flash messages on your view.

How to Install Toastr in Rails 6.0

Toastr needs jquery to work well on your project, don't worry, rails 6 automatically install any dependencies as you run the command below.

yarn add toastr

Screen Shot 2020-08-02 at 9.04.12 PM.png

Now navigate to app/javascript/packs/application.js and add the line of code below, you can add it just above require("@rails/ujs").start()

global.toastr = require("toastr")

We are almost there. Navigate to app/assets/stylesheets/application.scss. If you still having application.css. You might want to rename it to .scss. Add the line of code below at the top just before your styles.

@import "toastr/toastr";

Now let's see if it works, navigate to app/views/layouts/application.html.erb, and add the line of code below just before the end body tag.

   <%= yield %>

      toastr.success('Ya! it worked')

Fire up your application with rails server, you should have something like this.

Screen Shot 2020-08-02 at 9.14.44 PM.png

Hurray! you did it. Just before you go, remember our first code snippet? Let's replace the flash.notice and flash.alert with our new setup toastr.

     <% if flash.any? %>
    <script type="text/javascript">

      <% flash.each do |key, value| %>
        <% type = key.to_s.gsub('alert', 'error').gsub('notice', 'success') %>
        toastr.<%= type %>('<%= value %>')
      <% end %>

    <% end %>

To get a full grasp of how toastr works see the documentation. Here are a few snippets

// Display a warning toast, with no title
toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')

// Display a success toast, with a title
toastr.success('Have fun storming the castle!', 'Miracle Max Says')

// Display an error toast, with a title
toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')

Back to our toastr replacement for flash message, type = key.to_s.gsub('alert', 'error').gsub('notice', 'success'). Since toastr understands error and success, we are replacing flash's alert and notice keys with error and success respectively.

I hope you find this article useful, if it is, share your comments below.

Share this