multi-position-toaster

🍞 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