How to add toast notifications with toastr and JavaScript?

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.