flash-message-example

Source: https://github.com/CodeSeven/toastr

console:

yarn add toastr

Import toastr in app/javascripts/packs/application.js:

global.toastr = require("toastr")

app/javascript/stylesheets/application.scss:

@import 'toastr'

app/javascript/packs/application.js:

import "../stylesheets/application"

app/views/layouts/application.rb:

<% unless flash.empty? %>
   <script type="text/javascript">
      <% flash.each do |f| %>
    <% type = f[0].to_s.gsub('alert', 'error').gsub('notice', 'info') %>
   	 toastr['<%= type %>']('<%= f[1] %>');
   <% end %>
   </script>
<% end %>

customizing the flash:

<% unless flash.empty? %>
  <script type="text/javascript">
    <% flash.each do |f| %>
        <% type = f[0].to_s.gsub('alert', 'error').gsub('notice', 'info') %>
        toastr['<%= type %>']('<%= f[1] %>', '', {"closeButton": true,
                                                  "positionClass": "toast-top-center", 
                                                  "onclick": null, 
                                                  "showDuration": "300", 
                                                  "hideDuration": "1000", 
                                                  "timeOut": "5000", 
                                                  "extendedTimeOut": "1000", 
                                                  "showEasing": "swing", 
                                                  "hideEasing": "linear", 
                                                  "showMethod": "fadeIn", 
                                                  "progressBar": true,
                                                  "hideMethod": "fadeOut" });
    <% end %>
  </script>
<% end %>

Footnote: require("stylesheets/application.scss") = import "../stylesheets/application"