#flashmessages

Here are the steps to add toastr with the webpack.

1) Add toastr js with yarn from terminal

yarn add toastr

2) Require toastr in app/javascript/packs/application.js

global.toastr = require("toastr")

3) Create app/javascript/stylesheets/application.scss file to import custom or library css files

4) Import toastr css in app/javascript/stylesheets/application.scss

@import 'toastr'

5) Import app/javascript/stylesheets/application.scss file in app/javascript/packs/application.js

import "../stylesheets/application"

6) Add the following code in layouts/application.html.erb

<% unless flash.empty? %>

  <script type="text/javascript">

     <% flash.each do |f| %>

       <% type = f[0].to_s.gsub('alert', 'error').gsub('notice', 'info')..gsub('notice', 'success') %>

          toastr['<%= type %>']('<%= f[1] %>');

       <% end %>

   </script>

<% end %>

7) Let’s use the controller file

def create

 @blog = Blog.new(blog_params)

  respond_to do |format|

     if @blog.save

        format.html { redirect_to @blog, flash: {success: 'Blog Created Successfully'}}

       else

          format.html { render :new }

         end

    end

end

Output:

Conclusion:

Toastr understands error or is it successful, we are replacing flash’s alert and notice keys with error and success respectively.