Toastr, a Perfect Flash Message Alternative for Rails
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 @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
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') </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.alert with our new setup toastr.
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.