What is the process for integrating the toastr-rails gem into a Rails 6 project?

Hey guys, I've been struggling to integrate the toastr gem into my Rails 6 project where I already have the devise gem set up.

My main roadblock seems to be understanding webpacker and how to make toastr-rails webpacker friendly.

Despite going through all the available documentation, I still can't seem to figure it out on my own.

Here's what I've attempted so far:

yarn add toastr

Then, in my assets/packs/application.js file, I included:

@import 'toastr'

Additionally, in my assets/stylesheets/application.scss file, I required:

*= require_toastr

Lastly, in my layouts/application.html.erb file, this is the script section I added:

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
  <% unless flash.empty? %>
    <script type="text/javascript">
        <% flash.each do |f| %>
        <% type = f[0].to_s %>
        toastr['<%= type %>']('<%= f[1] %>');
        <% end %>
    </script>
  <% end %>
  <%= yield %>
 </body>
</html>

Even though this setup has worked perfectly fine in my Rails 4 project, I'm not getting any toast notifications with my current Rails 6 project.

Answer №1

For those looking to integrate toastr using the toastr-rails gem, it is recommended to utilize the asset pipeline over webpack.

Below are the steps to incorporate toastr with webpack.

  1. Install toastr js using yarn

    yarn add toastr
    
  2. Include toastr in app/javascript/packs/application.js. Global inclusion is advised to prevent errors

    global.toastr = require("toastr")
    
  3. Create a 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. Include the app/javascript/stylesheets/application.scss file in app/javascript/packs/application.js

    import "../stylesheets/application"
    
  6. A helper method for flash messages was created. Add this method to application_helper.rb or another helper file

    def toastr_flash
      flash.each_with_object([]) do |(type, message), flash_messages|
        type = 'success' if type == 'notice'
        type = 'error' if type == 'alert'
        text = "<script>toastr.#{type}('#{message}', '', { closeButton: true, progressBar: true })</script>"
        flash_messages << text.html_safe if message
      end.join("\n").html_safe
    end
    
  7. Integrate the toastr_flash method into layouts/application.html.erb or any desired location

    <!DOCTYPE html>
    <html>
      <head>
      </head>
      <body>
        <%= yield %>
        <%= toastr_flash %>
      </body>
    </html>
    

Answer №2

To begin, the first step is to incorporate toastr into your project.

If you are using yarn:

yarn add toastr

If you are using npm:

npm -i toastr

Once added, navigate to your node_modules directory where you will find the toastr library (node_modules/toastr). Within this directory, you will see files such as toastr.scss and toastr.js. Next, you will need to import these files into your application.

In app/assets/application.scss:

@import "toastr/toastr";

In app/javascripts/packs/application.js:

toastr = require("toastr")

Alternatively, you can also use:

import toastr from 'toastr/toastr';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vertical alignment can be a challenge with Bootstrap flex items

I’m currently facing an issue with centering the elements within the <main> tag. There seems to be a mysterious gap between the <h1> and <h3> elements, and I can’t seem to pinpoint the root cause of this spacing anomaly. Any insights ...

Tips for displaying the content of a personalized navigation tab using jQuery

I successfully created custom tabs using JQuery. Here is the code for my custom tabs: <div class="row"> <div class="col-4 master-advanced-left-tab master-advanced-left-tab-active"> <p>Item 1</p> </div> < ...

Choose the option to eliminate the dropdown arrow in all web browsers

Although my code functions well in various browsers, I am experiencing an issue with IE. I have styled the select element, but I am unable to remove the default arrow in IE. <form> <label for="selectitem">Food Favorites</label> <selec ...

Linking text to specific spot on image

I am seeking a solution to anchor a text input box to a specific spot on an image. Although I can achieve this using CSS, the problem arises when I resize my window and the alignment of the input box is lost. While I want to allow some resizing of the win ...

Is there a way to position the button at the bottom right corner of my div box?

Having trouble positioning the button in the bottom-right corner of the parent div? I attempted using float: right;, but it ended up outside of the box. How can I keep the button within the box and align it to the bottom-right corner? If you have a solutio ...

List items that are not in any particular order spilling over onto the next

Having an issue with an unordered list where the list items aren't all on the same line. The 5th element is dropping to the next line even though each item is set to 20% of the container. The math adds up, so not sure what's causing the problem. ...

What is the method for activating -webkit-animation/transition-property for :before and :after pseudo elements?

Is there a way to activate the -webkit-animation for :before and :after pseudo elements? It seems that in this demo http://jsfiddle.net/4rnsx/, the animation is not working for :before and :after elements. I am attempting to make it work using Mootools ...

Can Bootstrap support breaking the inline code block?

I am currently developing Blaze, an application that utilizes the SE API to retrieve recent content. It is effective in identifying NAAs, but a particular issue arises when someone places extensive code or even an entire sentence within an inline code bloc ...

Jquery div mysteriously disappearing without explanation

I need some help with my image options. Whenever I hover over the image, the options appear below it. However, when I try to move down to select an option, they disappear. I have configured the slideUp function so that it only happens when the user moves a ...

Maintain the height of the image equal to the height of the

I've been facing challenges with adjusting the height of this image to match the div container. I've experimented with various height properties such as max-height, min-height, normal height, auto, and 100%, but none seem to be providing the desi ...

What causes the height and width properties in a div to remain unchanged even after using the zoom/scale CSS?

I'm trying to center a CSS spinner on the page, but I am struggling with making it happen. Even when scaled down by 50%, the height and width remain at 200px. <div class="center" style=""> <div class="uil-default-css" style="width: 200px ...

Color the area entirely in black

I am currently working on a project for one of my courses, where I have created a website for a specific service. However, I am facing some challenges and things are not going as smoothly as I had hoped. Here is a screenshot of the page: https://i.stack.im ...

What method does a rails server use to differentiate between XML and JSON requests?

How does the server in a Rails app differentiate between an XML and JSON request when both have the same HTTP header? ...

JavaScript error leading to ERR_ABORTED message showing up in the console

When I try to load my HTML page, my JavaScript code keeps throwing an error in the console. I am attempting to import some JavaScript code into VSCode using an app module for future reuse. The code is being run through a local server. Error Message: GET ...

Placing an exit button beside an image for easy navigation

Here is a snippet of my code: <style type="text/css"> .containerdiv { position:relative;width:100%;display:inline-block;} .image1 { position: absolute; top: 20px; left: 10px; } </style> <div class="containerdiv"> <ima ...

Unusual Box-shadow glitch experienced exclusively when scrolling in Chrome 51

While working on my website, I encountered a peculiar issue with the box-shadow in Chrome 51. My site has a fixed header with a box-shadow, but when I scroll up or down, the box-shadow leaves behind some marks (horizontal gray lines): https://i.stack.imgu ...

Adjust the color of a label based on a set threshold in Chart.js

Can anyone help me with my Chart.js issue? Here is a link to the chart: https://i.sstatic.net/RL3w4.gif I am trying to change the color of the horizontal label when it falls between 70.00 - 73.99. Does anyone know if there's a specific option for th ...

Issue with reordering columns in Bootstrap 5

Currently, I am transitioning to Bootstrap 5 and facing challenges with the column re-ordering feature. Within my layout, I have three columns: a title, an image, and a paragraph of text. My goal is to display the image on the left, the title on the right, ...

Update the CSS for InputLabel

I have a drop-down list that I want to customize. The issue is illustrated below: https://i.sstatic.net/hzVtl.png I'm looking to center the text "choose format" within the field and adjust the font size. return ( <FormControl sx={{ m: 1 ...

What is the best way to adjust the placement of this object so it is anchored to the left side?

https://i.sstatic.net/k8aF1.png I'm struggling to position one of my divs more to the left within a flex container. No matter what I try, changing the class of the div doesn't seem to have any effect. Here's the code snippet: import React f ...