✨ Features

- 🚀 Lightweight - Minimal bundle size with zero dependencies
- 🎨 6 Built-in Themes - Success, Error, Info, Warning, Dark, and Light themes
- 🎯 Interactive Confirmation Dialogs - Perfect replacement for SweetAlert with dark/light themes
- 📱 7 Flexible Positions - Including center position ideal for confirmations
- ⚡ Apple-Style Animations - Smooth AirDrop-inspired entrance and car-swipe exit effects
- 🔧 Framework Agnostic - Works with React, Vue, Angular, or vanilla JS
- 🎯 Auto-dismiss - Configurable timeout with manual close option
- 📝 Description Support - Optional secondary text for detailed messages
- 🌈 Easy Customization - Simple API with sensible defaults
- ♿ Accessible - Clean HTML structure with proper ARIA support
- 🎨 Custom SVG Icons - Beautiful vector icons for each toast type
- ✨ Modern Design - Glassmorphism effects with backdrop blur
- 🔒 Single Instance - Only one confirmation at a time with shake animation
- ⏳ Loading States - Built-in loading spinner for async operations
- 🎨 Custom Gradients - primaryColor & secondaryColor for gradient backgrounds

🚀 Quick Start

$3

#### NPM (React, Node.js, etc.)
``bash
npm install toastify-pro
`

#### CDN (Browser)
`html

`

$3

#### With NPM
`javascript
import ToastifyPro from 'toastify-pro';

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');

// Show toasts with descriptions
toast.success('Success!', 'Your changes have been saved successfully.');
toast.error('Error occurred!', 'Please check your network connection and try again.');
toast.info('New feature!', 'Check out our latest updates in the dashboard.');

// 🆕 NEW: Confirmation dialogs
toast.conf('Delete this item?', (confirmed) => {
if (confirmed) {
toast.success('Item deleted successfully!');
} else {
toast.info('Delete cancelled');
}
});

// Confirmation with description
toast.conf('Are you sure?', 'This action cannot be undone.', (confirmed) => {
console.log('User confirmed:', confirmed);
});

// Advanced confirmation options
toast.conf('Save changes?', {
description: 'Your changes will be permanently saved.',
confirmText: 'Save',
cancelText: 'Discard',
theme: 'light', // 'dark' (default) or 'light'
position: 'center', // Default for confirmations
onConfirm: () => console.log('Confirmed!'),
onCancel: () => console.log('Cancelled!')
});
`

#### With CDN
`html







Show Toast
Show Confirmation




`

📚 API Reference

$3

`javascript
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 of screen (ideal for confirmations)

$3

#### toast.show(message, type, options)
Main method to display a toast notification.
`javascript
toast.show('Custom message', 'success', {
timeout: 5000, // Override default timeout
allowClose: false, // Hide close button for this toast
maxLength: 50, // Override message length limit
description: 'Additional details about the message' // Optional description
});
`

#### Enhanced Toast Methods with Description Support
All toast methods now support description as a second parameter or in options:

#### toast.success(message, options|description)
Display a success toast with green background and checkmark icon.
`javascript
toast.success('Data saved successfully!');
toast.success('Upload complete!', { timeout: 2000 });
toast.success('Success!', 'Your changes have been saved.'); // With description
`

#### toast.error(message, options|description)
Display an error toast with red background and error icon.
`javascript
toast.error('Failed to save data!');
toast.error('Network error occurred!', { allowClose: false });
toast.error('Error!', 'Please check your connection and try again.'); // With description
`

#### toast.warning(message, options|description)
Display a warning toast with orange background and warning icon.
`javascript
toast.warning('Please verify your input');
toast.warning('Session expires in 5 minutes', { timeout: 10000 });
toast.warning('Warning!', 'This action cannot be undone.'); // With description
`

#### toast.info(message, options|description)
Display an info toast with blue background and info icon.
`javascript
toast.info('New feature available!');
toast.info('Check your email for verification', { timeout: 0 }); // No auto-dismiss
toast.info('Info', 'Here are some helpful tips for you.'); // With description
`

#### toast.dark(message, options|description)
Display a dark themed toast with star icon.
`javascript
toast.dark('Dark mode enabled');
toast.dark('Processing in background...', { allowClose: false });
toast.dark('Dark Mode', 'Switched to elegant dark theme.'); // With description
`

#### toast.light(message, options|description)
Display a light themed toast with dark text and calendar icon.
`javascript
toast.light('Light theme activated');
toast.light('Settings updated', { timeout: 2000 });
toast.light('Light Mode', 'Switched to clean light theme.'); // With description
`

#### 🆕 toast.conf(message, descriptionOrCallback, callback) or toast.confirm(message, descriptionOrCallback, callback)
Display an interactive confirmation dialog with confirm/cancel buttons. Both methods work identically.

Features:
- 🎯 Center positioning (default) for maximum attention
- 🔒 Single instance - Only one confirmation at a time with shake animation
- ⏳ Loading states - Built-in spinner for async operations
- 🎨 Custom gradients - primaryColor & secondaryColor support
- 📱 Responsive design for mobile devices
- ⚡ No auto-dismiss - requires user interaction

Options:
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| description | string | - | Secondary text below the message |
| confirmText | string | 'Confirm' | Custom confirm button text |
| cancelText | string | 'Cancel' | Custom cancel button text |
| theme | string | 'dark' | Theme: 'dark' or 'light' |
| position | string | 'center' | Any valid position |
| primaryColor | string | - | Primary gradient color (hex) |
| secondaryColor | string | - | Secondary gradient color (hex) |
| onConfirm | function | - | Callback when confirmed |
| onCancel | function | - | Callback when cancelled |

`javascript
// 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 permanently.',
confirmText: 'Save',
cancelText: 'Discard',
theme: 'light',
position: 'center'
}, (confirmed) => {
if (confirmed) submitForm();
});
`

#### ⏳ Loading States
Handle async operations with built-in loading spinner:

`javascript
// Manual loading control
toast.conf('Process data?', {
confirmText: 'Process'
}, (confirmed, { setLoading, close }) => {
if (confirmed) {
setLoading(true); // Show spinner, disable buttons

fetch('/api/process')
.then(() => {
setLoading(false);
close();
toast.success('Done!');
})
.catch(() => {
setLoading(false);
close();
toast.error('Failed!');
});
}
});

// Async/await (auto-loading for promises)
toast.conf('Fetch data?', {
confirmText: 'Fetch',
onConfirm: async () => {
await fetch('/api/data'); // Auto shows loading
toast.success('Data fetched!');
}
});

// With custom colors
toast.conf('Upload file?', {
primaryColor: '#f59e0b',
secondaryColor: '#d97706',
onConfirm: async ({ setLoading, close }) => {
setLoading(true);
await uploadFile();
close();
toast.success('Uploaded!');
}
});
`

#### 🎨 Custom Gradient Colors
Create beautiful gradient backgrounds:

`javascript
// Orange gradient
toast.conf('Custom styled!', {
primaryColor: '#f97316',
secondaryColor: '#ea580c',
confirmText: 'Nice!'
});

// Purple gradient
toast.conf('Purple theme', {
primaryColor: '#8b5cf6',
secondaryColor: '#6366f1'
});

// Text color auto-adjusts based on background brightness
toast.conf('Light background', {
primaryColor: '#fef3c7', // Light color
secondaryColor: '#fde68a' // Dark text will be used
});
`

#### 🔒 Single Instance (Shake Effect)
Only one confirmation dialog can be open at a time. Attempting to open another will shake the existing one:

`javascript
// First call - shows confirmation
toast.conf('First dialog');

// Second call - shakes existing dialog instead of opening new one
toast.conf('Second dialog'); // Shakes first dialog!
`

$3

#### Custom SVG Icons
Each toast type includes beautiful vector icons that scale perfectly:
- Success: ✓ Checkmark circle icon
- Error: ✗ X circle icon
- Warning: ⚠ Triangle warning icon
- Info: ℹ Info circle icon
- Dark: ★ Star icon
- Light: ☀ Calendar icon

#### Position-Aware Car Swipe Animations
Toasts automatically exit with position-aware animations:
- carSwipeBottom - For bottom positioned toasts (swipes down)
- carSwipeTop - For top positioned toasts (swipes up)
- carSwipeLeft - For left positioned toasts (swipes left)
- carSwipeRight - For right positioned toasts (swipes right)
- carSwipeCenter - For center positioned toasts (swipes down)

#### POP UP Entrance Animation
All toasts use the airdropPop entrance animation with:
- 4-stage rotation and scaling effects
- Professional iOS-inspired timing
- Smooth cubic-bezier transitions

🎨 Customization

$3

`javascript
const toast = new ToastifyPro({
position: 'top-right',
timeout: 4000,
allowClose: true,
maxLength: 150
});
`

$3

`javascript
// Persistent toast (no auto-dismiss)
toast.error('Critical error!', { timeout: 0 });

// Quick notification
toast.success('Saved!', { timeout: 1000 });

// Toast with description - object format
toast.info('Update Available', {
description: 'Version 2.0 is now available with new features and improvements.',
timeout: 8000,
allowClose: true
});

// Toast with description - simple format
toast.success('Welcome!', 'Thanks for joining our platform. Explore the features!');

// Long message with close button
toast.info('This is a very long message that might be truncated', {
maxLength: 200,
allowClose: true,
timeout: 8000
});
`

$3

You can override the default styles by adding your own CSS:

`css
/ Custom positioning /
.toastify-pro-container.bottom-center {
bottom: 50px; / Adjust distance from bottom /
}

/ Custom toast appearance /
.toastify-pro {
border-radius: 12px;
font-family: 'Inter', sans-serif;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/ Custom success color /
.toastify-pro.success {
background: rgba(34, 197, 94, 0.95);
}

/ Custom close button /
.toastify-pro .close-btn {
font-weight: bold;
font-size: 18px;
}
`

🌟 Framework Examples

$3

`jsx
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 perfectly!');
};

const handleError = () => {
toast?.error('Something went wrong in React!');
};

const handleWithDescription = () => {
toast?.info('New Feature!', 'Check out our latest React integration updates.');
};

// 🆕 NEW: Confirmation dialog examples
const handleDelete = () => {
toast?.conf('Delete item?', 'This action cannot be undone.', (confirmed) => {
if (confirmed) {
// Perform deletion logic
console.log('Deleting item...');
toast?.success('Item deleted successfully!');
} else {
toast?.info('Delete cancelled');
}
});
};

const handleLogout = () => {
toast?.conf('Sign out?', {
description: 'You will need to sign in again to access your account.',
confirmText: 'Sign Out',
cancelText: 'Stay Signed In',
theme: 'dark',
position: 'center'
}, (confirmed) => {
if (confirmed) {
// Logout logic
window.location.href = '/login';
}
});
};

const handleIconDemo = () => {
// Showcase different icons with descriptions
toast?.success('✓ Success Icon', 'Beautiful checkmark with green theme');
setTimeout(() => toast?.error('✗ Error Icon', 'Clear error indication with red theme'), 500);
setTimeout(() => toast?.warning('⚠ Warning Icon', 'Alert triangle with orange theme'), 1000);
setTimeout(() => toast?.info('ℹ Info Icon', 'Information circle with blue theme'), 1500);
};

return (

Show Success
Show Error
Show with Description
Demo All Icons
Delete with Confirmation
Logout Confirmation

);
}

export default App;
`

$3

`vue



`

$3

`typescript
import { Component, OnInit } from '@angular/core';
import ToastifyPro from 'toastify-pro';

@Component({
selector: 'app-toast-example',
template:
Show Success
Show Error
Show Info
Show Confirmation
Logout

})
export class ToastExampleComponent implements OnInit {
private toast: ToastifyPro;

ngOnInit() {
this.toast = new ToastifyPro({
position: 'top-center',
timeout: 3500,
allowClose: true
});
}

showSuccess() {
this.toast.success('Angular integration works!');
}

showError() {
this.toast.error('Error in Angular component!');
}

showInfo() {
this.toast.info('Information from Angular', {
timeout: 5000
});
}

// 🆕 NEW: Confirmation methods
showConfirmation() {
this.toast.conf('Save document?', 'All changes will be saved permanently.', (confirmed: boolean) => {
if (confirmed) {
this.saveDocument();
} else {
this.toast.info('Save cancelled');
}
});
}

showLogoutConfirmation() {
this.toast.conf('Sign out?', {
description: 'You will be logged out of your account.',
confirmText: 'Sign Out',
cancelText: 'Cancel',
theme: 'light',
position: 'center'
}, (confirmed: boolean) => {
if (confirmed) {
this.logout();
}
});
}

private saveDocument() {
// Save logic
this.toast.success('Document saved successfully!');
}

private logout() {
// Logout logic
this.toast.success('Logged out successfully!');
}
}
`

$3

`javascript
// Initialize toast
const toast = new ToastifyPro({
position: 'top-left',
timeout: 3000,
allowClose: true
});

// Form submission example with confirmation
document.getElementById('submitForm').addEventListener('click', async function() {
toast.conf('Submit form?', 'Your data will be sent to the server.', async (confirmed) => {
if (confirmed) {
try {
// Simulate API call
const response = await fetch('/api/submit', { method: 'POST' });

if (response.ok) {
toast.success('Form submitted successfully!', 'Your data has been processed and saved.');
} else {
toast.error('Failed to submit form', 'Please check your inputs and try again.');
}
} catch (error) {
toast.error('Network error occurred', 'Check your connection and retry.');
}
}
});
});

// Delete confirmation example
function deleteItem(itemId) {
toast.conf('Delete this item?', {
description: 'This action cannot be undone and will permanently remove all associated data.',
confirmText: 'Delete',
cancelText: 'Keep',
theme: 'dark',
position: 'center'
}, (confirmed) => {
if (confirmed) {
// Perform deletion
console.log('Deleting item:', itemId);
toast.success('Item deleted!', 'The item has been permanently removed.');
} else {
toast.info('Delete cancelled', 'Your item is safe.');
}
});
}

// File upload with confirmation and progress
function handleFileUpload() {
toast.conf('Upload file?', 'The file will be uploaded to your account.', (confirmed) => {
if (confirmed) {
toast.info('Uploading...', 'Please wait while we process your file.');

// Simulate upload completion
setTimeout(() => {
toast.success('Upload complete!', 'Your file has been uploaded successfully.');
}, 3000);
}
});
}

// Logout confirmation
function logout() {
toast.conf('Sign out?', {
description: 'You will need to sign in again to access your account.',
confirmText: 'Sign Out',
cancelText: 'Stay Signed In',
theme: 'light'
}, (confirmed) => {
if (confirmed) {
window.location.href = '/login';
}
});
}

// Multiple toast types with descriptions
function showAllTypes() {
toast.success('Success!', 'Operation completed successfully');
setTimeout(() => toast.error('Error!', 'Something went wrong'), 500);
setTimeout(() => toast.warning('Warning!', 'Please review this action'), 1000);
setTimeout(() => toast.info('Info', 'Here is some helpful information'), 1500);
setTimeout(() => toast.dark('Dark Mode', 'Elegant dark notification'), 2000);
setTimeout(() => toast.light('Light Mode', 'Clean light notification'), 2500);
}

// Showcase new enhanced features including confirmations
function demoEnhancedFeatures() {
// SVG Icons demo
toast.success('✓ Beautiful Icons', 'Each type has its own vector icon that scales perfectly');

// Car swipe animation (automatic based on position)
setTimeout(() => {
toast.info('🚗 Car Swipe Exit', 'Watch the position-aware exit animation');
}, 1000);

// Apple AirDrop entrance (automatic)
setTimeout(() => {
toast.warning('📱 AirDrop Style', 'iOS-inspired entrance with rotation effects');
}, 2000);

// Glassmorphism design
setTimeout(() => {
toast.dark('✨ Glassmorphism', 'Modern backdrop blur with translucent design');
}, 3000);

// 🆕 Confirmation dialog demo
setTimeout(() => {
toast.conf('Try confirmation?', 'Experience the new interactive dialog feature.', (confirmed) => {
if (confirmed) {
toast.success('🎉 Confirmation works!', 'You can now create interactive dialogs easily.');
} else {
toast.info('No problem!', 'Confirmation dialogs are optional.');
}
});
}, 4000);
}

// Advanced confirmation examples
function advancedConfirmationExamples() {
// Settings reset confirmation
toast.conf('Reset all settings?', {
description: 'This will restore all settings to their default values.',
confirmText: 'Reset',
cancelText: 'Cancel',
theme: 'dark',
position: 'center'
}, (confirmed) => {
if (confirmed) {
// Reset settings logic
toast.success('Settings reset!', 'All settings have been restored to defaults.');
}
});
}

// Advanced usage with all new features
function advancedExample() {
// Progress indication with confirmation first
toast.conf('Start processing?', {
description: 'This will upload your file to the server and may take a few minutes.',
confirmText: 'Start',
cancelText: 'Later',
theme: 'light'
}, (confirmed) => {
if (confirmed) {
toast.info('Processing...', {
description: 'Please wait while we upload your file to the server',
timeout: 0, // No auto-dismiss
allowClose: true
});

// Simulate progress completion
setTimeout(() => {
toast.success('Upload Complete!', {
description: 'Your file has been uploaded successfully with all metadata',
timeout: 5000
});
}, 3000);
}
});
}
`

📱 Browser Support

| Browser | Version |
|---------|---------|
| Chrome | ≥ 60 |
| Firefox | ≥ 55 |
| Safari | ≥ 12 |
| Edge | ≥ 79 |

⚙️ Configuration Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| position | string | 'bottom-center' | Toast container position |
| timeout | number | 3000 | Auto-dismiss time (0 = no auto-dismiss) |
| allowClose | boolean | true | Show close button |
| maxLength | number | 100 | Maximum message length |
| description | string | undefined | Optional secondary text for detailed information |

🎨 Available Themes

| Theme | Background | Text Color | Icon | Use Case |
|-------|------------|------------|------|----------|
| success | Green | White | ✓ Checkmark | Success messages |
| error | Red | White | ✗ X Circle | Error messages |
| warning | Orange | White | ⚠ Triangle | Warning messages |
| info | Blue | White | ℹ Info Circle | Information messages |
| dark | Dark Gray | White | ★ Star | General purpose |
| light | Light Gray | Black | ☀ Calendar | Light theme compatibility |

$3

- Custom SVG Icons: Each theme includes beautiful vector icons that are crisp at any resolution
- Glassmorphism Design: Modern backdrop-filter blur effects with translucent backgrounds
- Car Swipe Animations: Position-aware exit animations that swipe toasts in natural directions
- POP UP Entrance: Professional iOS-inspired entrance with 4-stage rotation and scaling
- Progress Bar: Animated progress bar with shimmer effects showing remaining time
- Responsive Design: Mobile-first approach that adapts to all screen sizes

📄 License

MIT © Abhishek Potter

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)
5. Open a Pull Request

📧 Support

- 🐛 Bug Reports: GitHub Issues
- 💬 Discussions: GitHub Discussions
- 📧 Email: abhishekpotter77@gmail.com

🙏 Acknowledgments

- Inspired by modern toast libraries
- Built with ❤️ by the open-source community
- Special thanks to all contributors

---