Categories
JavaScript Answers

How to add toast notifications with toastr and JavaScript?

Spread the love

Sometimes, we want to add toast notifications with toastr and JavaScript.

In this article, we’ll look at how to add toast notifications with toastr and JavaScript.

How to add toast notifications with toastr and JavaScript?

To add toast notifications with toastr and JavaScript, we can add the toastr script and CSS.

Then we can use the toastr object to create toasts.

For instance, we write:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>

to add the toastr CSS and JavaScript file and jQuery.

jQuery is required for toastr.

Then we call toastr.success with a message string to show a success message by writing:

toastr.success('Success messages');

Conclusion

To add toast notifications with toastr and JavaScript, we can add the toastr script and CSS.

Then we can use the toastr object to create toasts.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *