Toastr, a Perfect Flash Message Alternative for Rails

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 @post.save 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 = current_user.posts.build(post_params)
        if @post.save
            if params[:images]
                params[:images].each do |img|
                    @post.photos.create(image: img)
                end
            end

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

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

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

    <script>
      toastr.success('Ya! it worked')
    </script>
  </body>

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

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

    </script>
    <% 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.