toastify-pro

Toastify Pro Logo

🚀 Quick Start - Install Toastify Pro (JavaScript Toast Notifications)

**A modern, lightweight, and highly customizable toast notification library** [![npm version](https://img.shields.io/npm/v/toastify-pro.svg)](https://www.npmjs.com/package/toastify-pro) [![npm downloads](https://img.shields.io/npm/dm/toastify-pro.svg)](https://www.npmjs.com/package/toastify-pro) [![License](https://img.shields.io/npm/l/toastify-pro.svg)](https://github.com/abhipotter/toastify-pro/blob/main/LICENSE) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/toastify-pro)](https://bundlephobia.com/package/toastify-pro) [Demo](https://abhipotter.github.io/toastify-pro/demo) • [Documentation](https://github.com/abhipotter/toastify-pro/wiki) • [Examples](https://github.com/abhipotter/toastify-pro/tree/main/examples)

✨ Features

🚀 Quick Start

📦 Installation

NPM (React, Node.js, etc.)

npm install toastify-pro

CDN (Browser)

<script src="https://cdn.jsdelivr.net/npm/toastify-pro/dist/toastify-pro.umd.min.js"></script>

🔨 Basic Usage

With NPM

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

<!DOCTYPE html>
<html>
<head>
    <title>Toastify Pro Example</title>
    <script src="https://cdn.jsdelivr.net/npm/toastify-pro/dist/toastify-pro.umd.min.js"></script>
</head>
<body>
    <button onclick="showToast()">Show Toast</button>
    <button onclick="showConfirmation()">Show Confirmation</button>
    
    <script>
        const toast = new ToastifyPro();
        
        function showToast() {
            toast.success('Hello from Toastify Pro!');
        }
        
        function showError() {
            toast.error('Something went wrong!');
        }
        
        function showCustom() {
            toast.show('Custom message', 'info', {
                timeout: 5000,
                allowClose: true
            });
        }
        
        // 🆕 NEW: Confirmation dialogs
        function showConfirmation() {
            toast.conf('Delete this item?', 'This action cannot be undone.', (confirmed) => {
                if (confirmed) {
                    toast.success('Item deleted!');
                } else {
                    toast.info('Delete cancelled');
                }
            });
        }
        
        function showAdvancedConfirmation() {
            toast.conf('Save document?', {
                description: 'All your changes will be saved permanently.',
                confirmText: 'Save Now',
                cancelText: 'Cancel',
                theme: 'light',
                position: 'center'
            }, (confirmed) => {
                console.log('User decision:', confirmed);
            });
        }
    </script>
</body>
</html>

📚 API Reference

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

Methods

toast.show(message, type, options)

Main method to display a toast notification.

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.

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.

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.

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.

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.

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.

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:

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 |

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

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

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

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

🆕 Enhanced Features

Custom SVG Icons

Each toast type includes beautiful vector icons that scale perfectly:

Position-Aware Car Swipe Animations

Toasts automatically exit with position-aware animations:

POP UP Entrance Animation

All toasts use the airdropPop entrance animation with:

🎨 Customization

Global Configuration

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

Per-Toast Options

// 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
});

Custom Styling

You can override the default styles by adding your own 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

React Integration

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 (
        <div>
            <button onClick={handleSuccess}>Show Success</button>
            <button onClick={handleError}>Show Error</button>
            <button onClick={handleWithDescription}>Show with Description</button>
            <button onClick={handleIconDemo}>Demo All Icons</button>
            <button onClick={handleDelete}>Delete with Confirmation</button>
            <button onClick={handleLogout}>Logout Confirmation</button>
        </div>
    );
}

export default App;

Vue.js Integration

<template>
    <div>
        <button @click="showSuccess">Show Success</button>
        <button @click="showError">Show Error</button>
        <button @click="showCustom">Show Custom</button>
        <button @click="showConfirmation">Show Confirmation</button>
        <button @click="showDeleteConfirmation">Delete Item</button>
    </div>
</template>

<script>
import ToastifyPro from 'toastify-pro';

export default {
    name: 'ToastExample',
    data() {
        return {
            toast: null
        };
    },
    mounted() {
        this.toast = new ToastifyPro({
            position: 'bottom-right',
            timeout: 4000
        });
    },
    methods: {
        showSuccess() {
            this.toast.success('Vue.js integration successful!');
        },
        showError() {
            this.toast.error('Error in Vue component!');
        },
        showCustom() {
            this.toast.show('Custom Vue message', 'warning', {
                timeout: 6000,
                allowClose: true
            });
        },
        // 🆕 NEW: Confirmation methods
        showConfirmation() {
            this.toast.conf('Save changes?', (confirmed) => {
                if (confirmed) {
                    this.saveData();
                } else {
                    this.toast.info('Changes not saved');
                }
            });
        },
        showDeleteConfirmation() {
            this.toast.conf('Delete this item?', {
                description: 'This action cannot be undone and will remove all associated data.',
                confirmText: 'Delete',
                cancelText: 'Keep',
                theme: 'dark',
                position: 'center'
            }, (confirmed) => {
                if (confirmed) {
                    this.deleteItem();
                    this.toast.success('Item deleted successfully!');
                }
            });
        },
        saveData() {
            // Save logic here
            this.toast.success('Data saved successfully!');
        },
        deleteItem() {
            // Delete logic here
            console.log('Item deleted');
        }
    }
};
</script>

Angular Integration

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

@Component({
    selector: 'app-toast-example',
    template: `
        <button (click)="showSuccess()">Show Success</button>
        <button (click)="showError()">Show Error</button>
        <button (click)="showInfo()">Show Info</button>
        <button (click)="showConfirmation()">Show Confirmation</button>
        <button (click)="showLogoutConfirmation()">Logout</button>
    `
})
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!');
    }
}

Vanilla JavaScript Examples

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

🆕 Enhanced Visual Features

📄 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

🙏 Acknowledgments

**Made with ❤️ by [Abhishek Potter](https://github.com/abhipotter)** If you found this project helpful, please consider giving it a ⭐️!
This site is open source. Improve this page.