Photo by 🇨🇭 Claudio Schwarz | @purzlbaum on Unsplash

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.