Toastr — Simple Non-Blocking Toast Notifications for the Web

Introduction

Toastr is a JavaScript library for showing non-blocking toast notifications. It provides four notification types (success, info, warning, error) that slide in from a configurable screen corner and auto-dismiss after a timeout. Toastr requires jQuery and is widely used in web applications for user feedback messages.

What Toastr Does

• Displays non-intrusive toast messages that appear and disappear without blocking user interaction
• Supports four notification types: success, info, warning, and error, each with distinct styling
• Positions notifications in any screen corner (top-right, top-left, bottom-right, bottom-left, top/bottom center)
• Auto-dismisses notifications after a configurable timeout with optional progress bar
• Stacks multiple notifications vertically with newest-on-top or oldest-on-top ordering

Architecture Overview

Toastr creates a container div that is fixed-positioned in the chosen screen corner. Each notification is appended as a child element with CSS classes for type-specific styling. Show and hide animations use jQuery's animate method with configurable easing and duration. A timer manages auto-dismiss behavior, and hovering over a notification pauses the countdown. The library exposes a global toastr object with methods for each notification type and a shared options configuration.

Self-Hosting & Configuration

• Install via npm or include jQuery and toastr from a CDN
• Import both the JavaScript module and CSS file into your project
• Configure global defaults by setting properties on toastr.options before calling notification methods
• Set timeOut (ms before auto-dismiss), positionClass, and preventDuplicates to control behavior
• Override onclick, onShown, onHidden, and onCloseClick callbacks for custom event handling

Key Features

• Four distinct notification types with color-coded styling for clear visual feedback
• Progress bar option that shows remaining time before auto-dismiss
• Click-to-dismiss and close button options for user-controlled dismissal
• Duplicate prevention mode that suppresses repeated identical messages
• Escape HTML option to prevent XSS when displaying user-generated content in notifications

Comparison with Similar Tools

• SweetAlert2 — modal-based alerts that require user interaction to dismiss; Toastr is non-blocking and better for passive notifications
• Notyf — modern toast library with no jQuery dependency and smaller footprint; Toastr has more configuration options and wider legacy adoption
• React Hot Toast — React-specific toast library with hooks API; Toastr works in any jQuery project but is not React-native
• Notistack — Material UI snackbar wrapper for React; Toastr is framework-agnostic but requires jQuery
• vue-toastification — Vue-specific toast library; Toastr works with Vue but requires jQuery as an additional dependency

FAQ

Q: Does Toastr require jQuery? A: Yes, Toastr depends on jQuery for DOM manipulation and animations. If you need a vanilla JavaScript solution, consider Notyf or a framework-specific toast library.

Q: How do I show a notification that does not auto-dismiss? A: Set timeOut: 0 and extendedTimeOut: 0 in the options. The notification will remain visible until the user clicks it or you call toastr.clear().

Q: Can I customize the appearance of notifications? A: Yes. Override the default CSS classes for .toast-success, .toast-error, .toast-info, and .toast-warning with your own styles. You can also pass custom CSS classes via the toastClass option.

Q: How do I prevent duplicate notifications? A: Set toastr.options.preventDuplicates = true. This suppresses a new notification if one with the same title and message is already visible.

Sources

• https://github.com/CodeSeven/toastr
• https://codeseven.github.io/toastr/