Vanilla Toaster

A lightweight, framework-agnostic toast notification library for any JavaScript project.

Features

• 🚀 Zero dependencies
• 🎯 Multiple toast positions (top-right, top-left, etc.)
• 🌈 Different toast types (success, error, warning, info)
• ⏱️ Configurable durations
• 🖱️ Dismissible toasts
• 🔄 Smooth CSS animations
• 💻 Works with any JavaScript framework or vanilla JS

Installation

npm install @sachetacharya/vanilla-toaster --save

Or use via CDN:

<script src="https://cdn.jsdelivr.net/npm/@sachetacharya/vanilla-toaster/dist/index.min.js"></script>

Usage

ES Module

import toast from '@sachetacharya/vanilla-toaster';

// Show different types of toasts
toast.success('Operation completed successfully!');
toast.error('Something went wrong!');
toast.warning('This is a warning message!');
toast.info('This is an info message!');

// With options
toast.show({
  message: 'Custom toast notification',
  type: 'success',
  duration: 5000,
  position: 'top-right',
  dismissible: true,
  onClose: () => console.log('Toast closed')
});

// Remove a specific toast
const toastId = toast.success('This will be removed');
toast.remove(toastId);

// Clear all toasts
toast.clearAll();

Browser

<script src="https://cdn.jsdelivr.net/npm/@sachetacharya/vanilla-toaster/dist/index.min.js"></script>
<script>
  // VanillaToaster is available in the global scope
  VanillaToaster.success('Operation completed successfully!');
  
  const id = VanillaToaster.error('Something went wrong!');
  
  // Remove after 5 seconds
  setTimeout(() => {
    VanillaToaster.remove(id);
  }, 5000);
</script>

API

Methods

• toast.show(options) - Show a toast with custom options
• toast.success(message, options) - Show a success toast
• toast.error(message, options) - Show an error toast
• toast.warning(message, options) - Show a warning toast
• toast.info(message, options) - Show an info toast
• toast.remove(id) - Remove a specific toast by ID
• toast.clearAll() - Remove all active toasts

Options

{
  message: string;          // Toast message
  type?: 'success' | 'error' | 'warning' | 'info'; // Toast type (default: 'info')
  duration?: number;        // Duration in ms (default: 3000, 0 = no auto-dismiss)
  position?: ToastPosition; // Position on screen (default: 'top-right')
  dismissible?: boolean;    // Can be dismissed by user (default: true)
  onClose?: () => void;     // Callback when toast is closed
}

Available Positions

• 'top-right' (default)
• 'top-left'
• 'bottom-right'
• 'bottom-left'
• 'top-center'
• 'bottom-center'

Framework Integration

React

import React from 'react';
import toast from '@sachetacharya/vanilla-toaster';

function ToastDemo() {
  return (
    <div>
      <button onClick={() => toast.success('Success message')}>
        Show Success
      </button>
      <button onClick={() => toast.error('Error message')}>
        Show Error
      </button>
    </div>
  );
}

Vue

<template>
  <div>
    <button @click="showSuccess">Show Success</button>
    <button @click="showError">Show Error</button>
  </div>
</template>

<script>
import toast from '@sachetacharya/vanilla-toaster';

export default {
  methods: {
    showSuccess() {
      toast.success('Success message');
    },
    showError() {
      toast.error('Error message');
    }
  }
}
</script>

Angular

import { Component } from '@angular/core';
import toast from '@sachetacharya/vanilla-toaster';

@Component({
  selector: 'app-toast-demo',
  template: `
    <button (click)="showSuccess()">Show Success</button>
    <button (click)="showError()">Show Error</button>
  `
})
export class ToastDemoComponent {
  showSuccess() {
    toast.success('Success message');
  }
  
  showError() {
    toast.error('Error message');
  }
}

License

MIT