Toast Notifications

A lightweight, customizable toast notification library with TypeScript support and zero dependencies.

Features

• 🎨 4 Toast Types: Success, Error, Warning, Info
• 📍 6 Positions: All corners and centers
• ⚡ Lightweight: Zero dependencies, ~3KB gzipped
• 🎭 Animations: Smooth enter/exit animations
• 🎯 TypeScript: Full TypeScript support
• 📱 Responsive: Mobile-friendly design
• ⏸️ Pause on Hover: Optional hover to pause auto-dismiss
• 🎛️ Highly Configurable: Extensive customization options

Installation

npm install desi-toast

Quick Start

import toast from 'desi-toast';

// Basic usage
toast.success('Operation completed successfully!');
toast.error('Something went wrong!');
toast.warning('Please check your input');
toast.info('New update available');

// With options
toast.show('Custom message', {
  type: 'success',
  position: 'top-center',
  duration: 5000,
  closable: true
});
\`\`\`

## API Reference

### Basic Methods

```javascript
// Show different types of toasts
toast.success(message, options?)
toast.error(message, options?)
toast.warning(message, options?)
toast.info(message, options?)

// Generic show method
toast.show(message, options?)

// Remove specific toast
toast.remove(id)

// Clear toasts
toast.clear()           // Clear all
toast.clear('top-right') // Clear specific position

Options

interface ToastOptions {
  type?: 'success' | 'error' | 'warning' | 'info';
  position?: 'top-left' | 'top-center' | 'top-right' | 
             'bottom-left' | 'bottom-center' | 'bottom-right';
  duration?: number;        // Auto-dismiss time (0 = no auto-dismiss)
  closable?: boolean;       // Show close button
  pauseOnHover?: boolean;   // Pause timer on hover
  className?: string;       // Custom CSS class
  style?: object;          // Inline styles
  onClick?: () => void;    // Click handler
  onClose?: () => void;    // Close callback
}

Advanced Usage

Custom Instance

import { ToastManager } from '@yourname/toast-notifications';

const customToast = new ToastManager({
  defaultPosition: 'bottom-center',
  defaultDuration: 3000,
  maxToasts: 3,
  gap: 12
});

customToast.success('Custom instance toast!');

Custom Styling

toast.success('Styled toast', {
  className: 'my-custom-toast',
  style: {
    backgroundColor: '#6366f1',
    borderRadius: '12px'
  }
});

Event Handlers

const toastId = toast.info('Click me!', {
  onClick: () => {
    console.log('Toast clicked!');
    toast.remove(toastId);
  },
  onClose: () => {
    console.log('Toast closed!');
  }
});

Positions

• top-left
• top-center
• top-right
• bottom-left
• bottom-center
• bottom-right

Styling

The library includes default styles, but you can customize them:

/* Override default styles */
.toast {
  font-family: 'Your Font', sans-serif;
}

.toast-success {
  background-color: #your-color;
}

/* Custom toast class */
.my-custom-toast {
  border: 2px solid #gold;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

Browser Support

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

License

MIT © [Your Name]

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request