A super lightweight (~5KB minified), elegant toast notification system for the browser. Zero dependencies, pure vanilla JavaScript with full TypeScript support.
- ⚡ Super Lightweight - Only ~5KB minified, minimal footprint on your bundle
- 📦 Zero Dependencies - No external libraries, pure vanilla JavaScript
- 🚀 Highly Efficient - Optimized performance with minimal DOM operations
- 🎨 Theme Support - Light, dark, and auto (follows system preferences)
- 📱 Responsive - Different animations for mobile and desktop
- 🎭 Smooth Animations - Beautiful fade-in, slide, and fade-out effects
- 🔷 TypeScript Native - Full type safety and IntelliSense support
- ⚡ Easy to Use - Simple API with powerful customization options
npm install @zzev/toastify// Option 1: Default export
import Toastify from '@zzev/toastify';
const theme = new Toastify.Theme('dark'); // 'light', 'dark', or null for auto
const toast = new Toastify.Core();
// Option 2: Named exports (recommended)
import { Theme, Core } from '@zzev/toastify';
const theme = new Theme('dark');
const toast = new Core();
// Initialize with your messages
await toast.init({
styles: theme.styles,
messages: [
{
img: 'https://placehold.co/64x64',
title: 'Welcome!',
time: 'now',
text: 'Your notification message here'
}
],
delays: {
startAfterMs: 1000,
displayIntervalMs: 2000,
fadeOutMs: 5000
}
});
// Run the toast notifications
toast.run();Initializes the toast system with configuration.
Options:
{
styles: string; // CSS styles from Theme.styles
messages: Array<{
img: string; // Image URL
title: string; // Toast title
time: string; // Time string (e.g., "now", "2m ago")
text: string; // Message content
}>;
delays: {
startAfterMs: number; // Delay before first toast (default: 1000)
displayIntervalMs: number; // Interval between toasts (default: 2000)
fadeOutMs: number; // Fade out delay (default: 5000, 0 = no fade)
};
}Starts displaying the toast notifications.
Stops the current toast sequence and removes all toasts.
Completely removes all toasts, styles, and cleans up resources.
Creates a new theme instance.
Parameters:
theme:'light' | 'dark' | null- Theme mode (null = auto, follows system)mobileSize:number- Mobile breakpoint in pixels (default: 768)
Properties:
styles: Returns the complete CSS styles stringrawStyles: Returns the raw CSS styles
Methods:
setTheme(theme): Updates the theme
await toast.init({
styles: theme.styles,
messages: [...],
delays: {
startAfterMs: 500, // Start after 500ms
displayIntervalMs: 3000, // 3s between each toast
fadeOutMs: 0 // No auto fade-out
}
});const messages = [
{
img: 'https://placehold.co/64x64/00ff00/white',
title: 'Success',
time: 'now',
text: 'Operation completed successfully'
},
{
img: 'https://placehold.co/64x64/0099ff/white',
title: 'Update Available',
time: '1m ago',
text: 'A new version is ready to install'
},
{
img: 'https://placehold.co/64x64/ffaa00/white',
title: 'Warning',
time: '5m ago',
text: 'Please review your settings'
}
];
await toast.init({
styles: theme.styles,
messages,
delays: {
startAfterMs: 1000,
displayIntervalMs: 2500,
fadeOutMs: 4000
}
});
toast.run();// Stop and remove all toasts
toast.stop();
// Or completely destroy (removes styles too)
toast.destroy();Contributions are welcome! Please follow these guidelines:
- Check existing issues before creating a new one
- Provide a clear description and steps to reproduce
- Include browser/environment information
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes following the code style
- Ensure TypeScript compilation passes (
npm run build) - Commit your changes (
git commit -m 'Add amazing feature') - Push to your branch (
git push origin feature/amazing-feature) - Open a Pull Request
# Clone the repository
git clone https://github.com/zzev/toastify.git
# Install dependencies
npm install
# Build the project
npm run buildGPL-3.0 License - see the LICENSE file for details
zzev
Found a bug? Please open an issue.