🍞 Sonner for Pure JS

An elegant toast component designed for Pure JavaScript

Built on Sonner, optimized for pure JavaScript environments

---

✨ Features

• 🚀 Zero Dependencies - Pure JavaScript implementation, no frameworks required
• 📱 Responsive Design - Perfect adaptation for mobile and desktop
• 🎨 Multiple Styles - Support for success, error, warning, info and more types
• ⚡ Lightweight - Small bundle size with excellent performance
• 🔧 Highly Customizable - Rich configuration options
• 🌙 Theme Support - Built-in light and dark themes
• 📦 Multi-format Support - UMD, ESM, CommonJS formats

🚀 Quick Start

Installation

npm install sonner-js

Basic Usage

import toast from 'sonner-js';

// Simple toast
toast('Hello World!');

// Toast with description
toast('Operation successful', {
    description: 'Your data has been saved'
});

📖 Usage Guide

Different Toast Types

// Success toast
toast.success('Operation successful');

// Error toast
toast.error('Operation failed');

// Info toast
toast.info('This is an information');

// Warning toast
toast.warning('Please note');

Toast with Action Buttons

toast('Confirm action', {
    action: {
        label: 'Confirm',
        onClick: () => console.log('User clicked confirm')
    }
});

// With cancel button
toast('Confirm deletion', {
    action: {
        label: 'Cancel',
        onClick: () => console.log('User cancelled operation'),
        cancel: true
    }
});

Promise Handling

const fetchData = () => fetch('/api/data');

toast.promise(fetchData, {
    loading: 'Loading...',
    success: 'Data loaded successfully',
    error: 'Failed to load data'
});

Update and Dismiss Toasts

// Create toast and get ID
const toastId = toast('Processing...');

// Update toast
toast.success('Processing complete', { id: toastId });

// Dismiss specific toast
toast.dismiss(toastId);

// Dismiss all toasts
toast.dismiss();

Permanent Toasts

toast('Important notice', {
    duration: 0  // Set to 0 for permanent display
});

🌐 CDN Usage

UMD Format

<script src="https://cdn.jsdelivr.net/npm/sonner-js/dist/umd/index.min.js"></script>
<script>
    sonnerJS('Hello from CDN!');
</script>

ESM Format

<script type="module">
    import toast from 'https://cdn.jsdelivr.net/npm/sonner-js/+esm';
    toast('Hello from ESM!');
</script>

⚙️ Configuration Options

import toast from 'sonner-js';

// Global configuration
toast.config({
    theme: 'dark',           // 'light' | 'dark'
    position: 'top-right',   // Position
    duration: 4000,         // Duration in milliseconds
    closeButton: true,      // Show close button
    richColors: true,        // Rich colors
    expand: true,           // Expand animation
    visibleToasts: 3,       // Number of visible toasts
    gap: 8,                 // Toast spacing
    offset: 16,             // Margin
    mobileOffset: 16,       // Mobile margin
    dir: 'ltr'              // Text direction
});

📄 License

MIT License - see LICENSE file for details.