🍞 Multi-Position Toaster

A powerful, customizable toast notification library with 9 positioning options, smooth animations, and complete theme control.

Live Demo | Documentation | Examples

✨ Features

• 🎯 9 Position Options - Display toasts anywhere on screen
• ⚡ Smooth Animations - Slide, fade, or bounce with 60fps performance
• 🎨 Theme Support - Light, dark, and custom themes
• 📱 Fully Responsive - Perfect mobile experience
• 🔧 TypeScript Support - Full type definitions included
• 🚀 Lightweight - Under 8KB gzipped, zero dependencies
• ♿ Accessible - ARIA labels and keyboard support
• 🎛️ Highly Customizable - Configure every aspect

📦 Installation

npm install multi-position-toaster

Or use via CDN:

<script src="https://unpkg.com/multi-position-toaster/dist/toaster.min.js"></script>

🚀 Quick Start

import { success, error, topLeft, center } from 'multi-position-toaster';

// Simple usage
success('Operation completed!');
error('Something went wrong!');

// Position-specific
topLeft('Hello from top-left!');
center('Centered message!');

📍 All Available Positions

import { 
  topLeft, topCenter, topRight,
  centerLeft, center, centerRight,
  bottomLeft, bottomCenter, bottomRight 
} from 'multi-position-toaster';

topLeft('Top Left');
topCenter('Top Center');
topRight('Top Right');
centerLeft('Center Left');
center('Center');
centerRight('Center Right');
bottomLeft('Bottom Left');
bottomCenter('Bottom Center');
bottomRight('Bottom Right');

🎨 Advanced Usage

Custom Configuration

import { create } from 'multi-position-toaster';

const toaster = create({
  position: 'top-center',
  theme: 'dark',
  animation: 'bounce',
  maxToasts: 3,
  defaultDuration: 4000,
  pauseOnHover: true
});

toaster.success('Custom configured toast!');

Rich Options

import { show } from 'multi-position-toaster';

show({
  type: 'warning',
  title: 'Warning',
  message: 'This action cannot be undone',
  position: 'center',
  duration: 10000,
  animation: 'bounce',
  pauseOnHover: true,
  progressBar: true,
  onClick: (toast) => {
    console.log('Toast clicked!');
  },
  onClose: (toast) => {
    console.log('Toast closed!');
  }
});

📖 API Reference

Methods

Type-Specific Methods

• success(message, options?) - Show success toast
• error(message, options?) - Show error toast
• warning(message, options?) - Show warning toast
• info(message, options?) - Show info toast

Position Methods

• topLeft(message, options?)
• topCenter(message, options?)
• topRight(message, options?)
• centerLeft(message, options?)
• center(message, options?)
• centerRight(message, options?)
• bottomLeft(message, options?)
• bottomCenter(message, options?)
• bottomRight(message, options?)

Utility Methods

• show(options) - Show toast with full configuration
• clear(position?) - Clear toasts (all or by position)
• setDefaults(options) - Set global defaults
• setTheme(theme) - Change theme dynamically
• create(options) - Create new toaster instance

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | position | string | 'top-right' | Toast position on screen | | theme | string | 'light' | Theme: 'light' or 'dark' | | maxToasts | number | 5 | Max toasts per position | | defaultDuration | number | 5000 | Default duration in ms | | animation | string | 'slide' | Animation type | | stackDirection | string | 'down' | Stack direction: 'up' or 'down' | | pauseOnHover | boolean | true | Pause on hover | | progressBar | boolean | true | Show progress bar |

Toast Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | type | string | 'info' | 'success', 'error', 'warning', 'info' | | title | string | '' | Toast title | | message | string | '' | Toast message (required) | | duration | number | 5000 | Duration in ms (0 = no auto-dismiss) | | position | string | - | Override default position | | closable | boolean | true | Show close button | | onClick | function | null | Click callback | | onClose | function | null | Close callback |

🎯 Use Cases

E-commerce

import { topRight, bottomCenter } from 'multi-position-toaster';

// Cart updates
topRight('Item added to cart!', { type: 'success' });

// Checkout
bottomCenter('Processing payment...', { type: 'info', duration: 0 });

Form Validation

import { topCenter } from 'multi-position-toaster';

topCenter('Please enter a valid email', { 
  type: 'error',
  duration: 4000 
});

Real-time Notifications

import { create } from 'multi-position-toaster';

const notifier = create({
  position: 'bottom-left',
  theme: 'dark',
  maxToasts: 3
});

// WebSocket messages
socket.on('message', (data) => {
  notifier.info(data.text);
});

🌐 Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+
• Opera 47+

📄 License

MIT © Kunal Risaanva

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📧 Support

• Documentation
• Issues
• Discussions

Made with ❤️ for developers who care about UX