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.
@post = current_user.posts.build(post_params)
params[:images].each do |img|
flash[:notice] = "Saved ..." #there you are!!!
flash[:alert] = "Something went wrong ..." # ah! again, there you are!!!
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
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.
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')
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? %>
<% 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.