# Toastr — Simple Non-Blocking Toast Notifications for the Web

> A lightweight JavaScript library for displaying non-blocking toast notification messages with configurable positioning, animation, and auto-dismiss behavior for user feedback in web applications.

## Install

Save in your project root:

# Toastr — Simple Non-Blocking Toast Notifications for the Web

## Quick Use
```bash
npm install toastr
```
```js
import toastr from 'toastr';
import 'toastr/build/toastr.min.css';

toastr.success('Record saved successfully');
toastr.error('Something went wrong');
toastr.warning('Session expires in 5 minutes');
toastr.info('New update available');
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-14b970cc
Author: AI Open Source