ModernToasts - Vanilla JavaScript Example

🚀 Live Demo

Try the vanilla JavaScript integration in action:

📦 CDN Installation

Include via CDN (Recommended)

<script src="https://unpkg.com/modern-toasts@latest/dist/modern-toasts.min.js"></script>

Alternative CDN Options


<script src="https://unpkg.com/modern-toasts@1.1.0/dist/modern-toasts.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/modern-toasts@latest/dist/modern-toasts.min.js"></script>

🎯 Basic Usage

Simple Implementation

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    <button onclick="showToast()">Show Toast</button>
    
    <script src="https://unpkg.com/modern-toasts@latest/dist/modern-toasts.min.js"></script>
    <script>
        // Get toast instance from global
        const { toast } = window.ModernToasts;
        
        function showToast() {
            toast.success('Hello from vanilla JavaScript!');
        }
    </script>
</body>
</html>

⚙️ Configuration

Global Configuration

const { toast } = window.ModernToasts;

// Configure globally
toast.configure({
    position: 'bottom-right',
    maxVisibleStackToasts: 3,
    defaultDuration: 4000,
    enableBorderAnimation: true,
    enableFillAnimation: true,
    pauseBackgroundToastsOnHover: true,
    animationDirection: 'left-to-right'
});

Per-Toast Options

// Custom options for individual toasts
toast.success('Custom toast!', {
    autoDismiss: 5000,
    backgroundColor: '#1f2937',
    textColor: '#f9fafb',
    borderColor: '#10b981',
    icon: '🚀',
    className: 'my-custom-toast'
});

🎨 Styling Examples

Custom Colors

// Dark theme toast
toast.info('Dark theme message', {
    backgroundColor: '#1f2937',
    textColor: '#f9fafb',
    borderColor: '#3b82f6'
});

// Brand colors
toast.success('Brand success!', {
    backgroundColor: '#10b981',
    textColor: '#ffffff',
    borderColor: '#059669'
});

Custom CSS Classes

// Add custom CSS
const customCSS = `
    .my-custom-toast {
        border-radius: 20px;
        font-weight: bold;
        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    }
`;

toast.configure({ customCSS });

// Use custom class
toast.success('Styled toast!', {
    className: 'my-custom-toast'
});

🔄 Real-world Examples

Form Validation

function validateForm() {
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    
    if (!email) {
        toast.error('Email is required');
        return false;
    }
    
    if (!email.includes('@')) {
        toast.error('Please enter a valid email address');
        return false;
    }
    
    if (password.length < 8) {
        toast.warning('Password should be at least 8 characters');
        return false;
    }
    
    toast.success('Form validation passed!');
    return true;
}

API Requests

async function fetchData() {
    // Show loading toast
    const loadingId = toast.info('Loading data...', { autoDismiss: 0 });
    
    try {
        const response = await fetch('/api/data');
        
        // Dismiss loading toast
        toast.dismiss(loadingId);
        
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }
        
        const data = await response.json();
        toast.success('Data loaded successfully!');
        return data;
        
    } catch (error) {
        toast.dismiss(loadingId);
        
        if (error.message.includes('404')) {
            toast.error('Data not found');
        } else if (error.message.includes('500')) {
            toast.error('Server error. Please try again.');
        } else {
            toast.error('Network error. Check your connection.');
        }
    }
}

User Interactions

// Copy to clipboard
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(() => {
        toast.success('📋 Copied to clipboard!');
    }).catch(() => {
        toast.error('Failed to copy to clipboard');
    });
}

// Save data
function saveData() {
    // Simulate save
    setTimeout(() => {
        toast.success('💾 Data saved successfully!', {
            autoDismiss: 3000
        });
    }, 1000);
}

🎯 Key Features

🚀 Zero Dependencies

No external libraries required. Just include the script and start using.

📦 Lightweight

Only ~8KB minified + gzipped. Won't slow down your application.

🎨 Fully Customizable

Colors, animations, positions, and styling can all be customized.

📱 Responsive

Works perfectly on desktop, tablet, and mobile devices.

♿ Accessible

ARIA support, keyboard navigation, and screen reader friendly.

🔧 Easy Integration

Works with any website or web application. No build process needed.

🔗 Useful Links

📦 NPM Package 📚 Documentation 🎮 Interactive Playground ⚛️ React Example

🍦 ModernToasts + Vanilla JS