Interactive Toast Notification Demo
Toast Notification Configuration
Toast Notification Types - Better than SweetAlert & Toastr
Advanced Toast Examples
🆕 New Features & Confirmations (conf/confirm)
Confirmation Dialogs (conf/confirm)
Interactive confirmation dialogs for user decisions. Single instance enforcement with shake animation.
Basic Confirmations
🎨 Custom Colors (Gradient)
⏳ Loading States (Async Operations)
📍 Positions & Themes
🚫 Single Instance (Try clicking multiple times!)
Installation & Setup Guide
npm install toastify-pro
import ToastifyPro from 'toastify-pro';
// Best React Toast Alternative
const toast = new ToastifyPro();
toast.success('Hello World!');
// 🆕 NEW: Confirmation dialogs
toast.conf('Save changes?', {
description: 'Your data will be saved permanently.',
confirmText: 'Save',
cancelText: 'Cancel',
position: 'center'
}, (confirmed) => {
console.log('User confirmed:', confirmed);
});
<script src="https://cdn.jsdelivr.net/npm/toastify-pro@latest/dist/toastify-pro.umd.min.js"></script>
// SweetAlert Alternative - No jQuery Required
const toast = new ToastifyPro();
toast.success('Hello World!');
// 🆕 NEW: Confirmation dialogs
toast.conf('Delete item?', (confirmed) => {
if (confirmed) {
toast.success('Deleted!');
} else {
toast.info('Cancelled');
}
});
yarn add toastify-pro
import ToastifyPro from 'toastify-pro';
// Toastr Replacement - Modern & Lightweight
const toast = new ToastifyPro();
toast.success('Hello World!');
// 🆕 NEW: Confirmation dialogs
toast.conf('Save changes?').then(confirmed => {
if (confirmed) {
toast.success('Saved successfully!');
}
});
Why Choose Toastify Pro? Features & Benefits
🚀 Ultra Lightweight Toast Library
Only ~2KB minified with zero dependencies. Fastest toast notification library available. Better than SweetAlert and Toastr in size and performance.
🎨 6 Beautiful Toast Themes
Success, Error, Info, Warning, Dark, and Light themes out of the box. More customizable than any SweetAlert alternative.
📱 Smart Responsive Positioning
6 different position options (top-left, top-right, top-center, bottom-left, bottom-right, bottom-center) that adapt to any layout design.
⚡ Hardware-Accelerated Animations
Smooth CSS transitions with fade and slide effects. 60fps performance guaranteed. Smoother than React-Toastify.
🔧 Framework Agnostic Design
Works seamlessly with React, Vue, Angular, or vanilla JavaScript. Perfect React Toast alternative without React dependency.
📱 Mobile-First Responsive
Mobile-first design that adapts to all screen sizes. Better mobile experience than SweetAlert or Toastr.
🎯 Easy Customization & API
Highly configurable with custom timeouts, positions, and styling. Easier to customize than any toast library.
🌐 Universal Browser Support
Supports all modern browsers including IE11+. More compatible than most notification libraries.
🎨 Custom SVG Icons
Beautiful vector icons for each toast type. Crisp at any resolution with perfect scaling. Icons adapt to theme colors automatically.
📝 Description Support
Add optional secondary text with descriptions. Perfect for detailed user feedback with title + description format.
🚗 Car Swipe Exit Animations
Position-aware exit animations that swipe toasts off-screen in the most natural direction. 5 different swipe patterns.
📱 POP UP Entrance
Stunning Apple-style entrance animation with rotation and scaling effects. Professional iOS-inspired user experience.
✨ Glassmorphism Design
Modern glassmorphism effects with backdrop-filter blur and translucent backgrounds. Premium visual design that stands out.
📊 Progress Bar Animation
Animated progress bar with shimmer effects showing remaining time. Visual countdown with smooth linear animation.
🔔 Interactive Confirmation Dialogs
Built-in confirmation dialogs with customizable buttons, callbacks, and themes. Perfect for delete confirmations and user decisions.
⏳ Loading States
Built-in loading spinner for async operations. Control with setLoading() and close() functions. Works with promises and async/await.
🎨 Custom Gradient Colors
Use primaryColor and secondaryColor for beautiful gradient backgrounds. Text color auto-adjusts based on background brightness.
🔒 Single Instance Mode
Only one confirmation at a time. Attempting to open another shakes the existing dialog. Prevents UI clutter and confusion.
🎯 Perfect Center Positioning
Center position option places toasts in the exact center of the screen. Ideal for important confirmations and critical notifications.
Performance Metrics - Fastest Toast Notification Library
Toastify Pro outperforms SweetAlert, Toastr, React-Toastify, and other notification libraries in speed, size, and user experience.
Toast Library Comparison - Why Toastify Pro Wins
Comprehensive comparison showing why Toastify Pro is the best choice over SweetAlert, Toastr, React-Toastify, and other notification libraries:
| Feature Comparison | Toastify Pro (Winner) | SweetAlert2 | Toastify JS | React-Toastify | Notyf |
|---|---|---|---|---|---|
| Bundle Size (Minified) | ~2KB (Smallest) | ~45KB | ~3KB | ~15KB | ~3KB |
| External Dependencies | 0 (Zero Dependencies) | 0 | 0 | React Required | 0 |
| Built-in Themes | 6 Beautiful Themes | 1 Default | 1 Default | 1 Default | 2 Built-in |
| Position Options | 6 Smart Positions | 1 Center Modal | 3 Options | 5 Options | 2 Options |
| Framework Support | All Frameworks | All Frameworks | Vanilla JS Only | React Only | All Frameworks |
| TypeScript Support | ✅ Full Support | ✅ | ❌ | ✅ | ✅ |
| Mobile Responsive | ✅ Mobile-First | ✅ | ✅ | ✅ | ✅ |
| Animation Performance | 60fps Guaranteed | Variable | Good | Good | Good |
| 🆕 Custom SVG Icons | ✅ Built-in Vector Icons | ❌ | ❌ | ❌ | ❌ |
| 🆕 Description Support | ✅ Title + Description | ✅ | ❌ | ❌ | ❌ |
| 🆕 Exit Animations | ✅ Car Swipe (5 Types) | ❌ | ❌ Basic Fade | ❌ Basic Slide | ❌ Basic Fade |
| 🆕 Entrance Animation | ✅ POP UP Style | ❌ Basic Modal | ❌ Basic Fade | ❌ Basic Slide | ❌ Basic Slide |
| 🆕 Glassmorphism Design | ✅ Backdrop Blur Effects | ❌ | ❌ | ❌ | ❌ |
Real-World Usage Examples - Better than SweetAlert & Toastr
Common scenarios where Toastify Pro outshines SweetAlert, Toastr, and other notification libraries in production applications:
📧 Form Validation Notifications
// Better than SweetAlert for form feedback
const handleSubmit = async (data) => {
try {
await submitForm(data);
toast.success('Form submitted successfully!');
} catch (error) {
toast.error('Please check your inputs');
}
};
🔄 API Responses
// API call notifications
fetch('/api/data')
.then(response => {
if (response.ok) {
toast.success('Data loaded successfully');
} else {
toast.error('Failed to load data');
}
});
🎯 User Actions
// User interaction feedback
const copyToClipboard = (text) => {
navigator.clipboard.writeText(text);
toast.success('Copied to clipboard!', {
timeout: 1500
});
};
📝 Toast with Description
// New! Description support
toast.success('Upload Complete', 'Your file has been uploaded successfully to the server');
// Or using options object
toast.error('Connection Failed', {
description: 'Please check your internet connection and try again',
timeout: 5000
});
🎨 Custom Icons & Themes
// Beautiful SVG icons automatically included
toast.success('Payment received!'); // ✓ icon
toast.error('Payment failed!'); // ✗ icon
toast.warning('Low balance!'); // ⚠ icon
toast.info('Update available!'); // ℹ icon
Complete API Reference
Constructor
Parameters:
-
options.position- Toast container position (default: 'bottom-center') -
options.timeout- Auto-dismiss time in milliseconds (default: 3000) -
options.allowClose- Show close button (default: true) -
options.maxLength- Maximum message length (default: 100)
Methods
Parameters:
message- The main text to display in the toastdescription- Optional secondary text (string or options.description)-
options- Optional configuration to override defaultsoptions.description- Secondary descriptive textoptions.timeout- Override default timeoutoptions.allowClose- Override close button settingoptions.maxLength- Override max message length
🆕 New Features
// Method 1: Pass description as second parameter
toast.success('Title', 'Description text');
// Method 2: Pass in options object
toast.error('Error occurred', {
description: 'Please try again later',
timeout: 5000
});
Toasts automatically exit with position-aware animations:
carSwipeBottom- For bottom positioned toastscarSwipeTop- For top positioned toastscarSwipeLeft- For left positioned toastscarSwipeRight- For right positioned toastscarSwipeCenter- For center positioned toasts
All toasts use the airdropPop entrance animation
with 4-stage rotation and scaling effects.
Position Values
'top-left'- Top left corner'top-center'- Top center'top-right'- Top right corner'bottom-left'- Bottom left corner'bottom-center'- Bottom center (default)'bottom-right'- Bottom right corner
Frequently Asked Questions
toast.success('Title', 'Description') or
use the options object toast.success('Title', {description:
'Description text'}).
Documentation
Basic Usage
// Initialize with default options
const toast = new ToastifyPro();
// Show different types of toasts
toast.success('Operation completed successfully!');
toast.error('Something went wrong!');
toast.warning('Please check your input');
toast.info('New update available');
toast.dark('Dark themed message');
toast.light('Light themed message');
Constructor Options
const toast = new ToastifyPro({
position: 'bottom-center', // Position of toast container
timeout: 3000, // Auto-dismiss time in milliseconds
allowClose: true, // Show close button
maxLength: 100 // Maximum message length
});
Position Options
- top-left - Top left corner
- top-right - Top right corner
- top-center - Top center
- bottom-left - Bottom left corner
- bottom-right - Bottom right corner
- bottom-center - Bottom center (default)
- center - Perfect center (ideal for confirmations) 🆕
🆕 Confirmation Dialogs
Interactive confirmation dialogs with loading states, custom colors, and single instance enforcement.
Basic Usage
// Simple confirmation
toast.conf('Delete this item?', (confirmed) => {
if (confirmed) toast.success('Deleted!');
});
// With description
toast.conf('Are you sure?', 'This action cannot be undone.', (confirmed) => {
console.log('User confirmed:', confirmed);
});
// With options
toast.conf('Save changes?', {
description: 'Your changes will be saved.',
confirmText: 'Save',
cancelText: 'Discard',
theme: 'light', // 'dark' (default) or 'light'
position: 'center'
}, (confirmed) => {
if (confirmed) submitForm();
});
⏳ Loading States
// Manual loading control
toast.conf('Process data?', (confirmed, { setLoading, close }) => {
if (confirmed) {
setLoading(true); // Show spinner
fetch('/api/process').then(() => {
close();
toast.success('Done!');
});
}
});
// Async/await (auto-loading)
toast.conf('Fetch data?', {
onConfirm: async () => {
await fetch('/api/data');
toast.success('Fetched!');
}
});
🎨 Custom Gradient Colors
// Custom gradient background
toast.conf('Custom styled!', {
primaryColor: '#f97316',
secondaryColor: '#ea580c',
confirmText: 'Nice!'
});
// Loading with custom colors
toast.conf('Upload?', {
primaryColor: '#8b5cf6',
secondaryColor: '#6366f1',
onConfirm: async ({ setLoading, close }) => {
setLoading(true);
await uploadFile();
close();
toast.success('Uploaded!');
}
});
🔒 Single Instance (Shake Effect)
// Only one confirmation can be open at a time
toast.conf('First dialog');
// Attempting to open another will shake the existing one
toast.conf('Second dialog'); // Shakes instead!
Advanced Usage
// Custom options per toast
toast.success('Saved!', { timeout: 1000 });
// Persistent toast (no auto-dismiss)
toast.error('Critical error!', { timeout: 0 });
// Long message with custom settings
toast.info('This is a very long message...', {
maxLength: 200,
allowClose: true,
timeout: 8000
});
🆕 Enhanced Features
Description Support
// Method 1: Pass description as second parameter
toast.success('Upload Complete', 'Your file has been uploaded successfully');
// Method 2: Use options object
toast.error('Connection Failed', {
description: 'Please check your internet connection and try again',
timeout: 5000
});
// Works with all toast types
toast.warning('Low Storage', 'Only 10% storage remaining on your device');
Custom SVG Icons
// Beautiful SVG icons are automatically included for each type:
toast.success('Payment received!'); // ✓ Check circle icon
toast.error('Payment failed!'); // ✗ X circle icon
toast.warning('Low balance!'); // ⚠ Triangle warning icon
toast.info('Update available!'); // ℹ Info circle icon
toast.dark('Night mode enabled'); // ★ Star icon
toast.light('Day mode enabled'); // ☀ Calendar icon
// Icons are vector-based and scale perfectly at any resolution
Advanced Animations
// Position-aware car swipe exit animations: // - Bottom positions: carSwipeBottom (swipes down off screen) // - Top positions: carSwipeTop (swipes up off screen) // - Left positions: carSwipeLeft (swipes left off screen) // - Right positions: carSwipeRight (swipes right off screen) // - Center positions: carSwipeCenter (swipes down off screen) // POP UP entrance animation (automatic): // - 4-stage rotation and scaling effects // - Professional iOS-inspired user experience // - Smooth cubic-bezier timing functions
Framework Integration
React Example
import React, { useEffect } from 'react';
import ToastifyPro from 'toastify-pro';
function App() {
const [toast, setToast] = React.useState(null);
useEffect(() => {
setToast(new ToastifyPro({
position: 'top-right',
timeout: 3000
}));
}, []);
const handleSuccess = () => {
toast?.success('React integration works!');
};
return (
<button onClick={handleSuccess}>Show Toast</button>
);
}
Vue.js Example
export default {
mounted() {
this.toast = new ToastifyPro({
position: 'bottom-right'
});
},
methods: {
showSuccess() {
this.toast.success('Vue.js integration!');
}
}
}
Angular Example
import { Component, OnInit } from '@angular/core';
import ToastifyPro from 'toastify-pro';
@Component({
selector: 'app-example',
templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {
private toast: any;
ngOnInit() {
this.toast = new ToastifyPro({
position: 'top-center'
});
}
showToast() {
this.toast.success('Angular integration!');
}
}
Browser Support
| Browser | Version | Notes |
|---|---|---|
| Chrome | ≥ 60 | Full support |
| Firefox | ≥ 55 | Full support |
| Safari | ≥ 12 | Full support |
| Edge | ≥ 79 | Full support |
| IE | ≥ 11 | Requires polyfills |
Contributing
We welcome contributions to Toastify Pro! Here's how you can help:
- Bug Reports: Report issues on GitHub Issues
- Feature Requests: Suggest new features or improvements
- Pull Requests: Submit code changes and improvements
- Documentation: Help improve the documentation
Development Setup
# Clone the repository git clone https://github.com/abhipotter/toastify-pro.git # Install dependencies npm install # Run development server npm run dev # Build for production npm run build # Run tests npm test
License & Support
License: MIT © Abhishek Potter
GitHub: https://github.com/abhipotter/toastify-pro
Issues: Report bugs or request features
NPM: https://www.npmjs.com/package/toastify-pro
Email: abhishekpotter77@gmail.com
Support the Project
If you find Toastify Pro useful, consider:
- ⭐ Starring the repository on GitHub
- 🐛 Reporting bugs and issues
- 💡 Suggesting new features
- 📢 Sharing with your network
- ☕ Buy me a coffee