toastify-pro

Toastify Pro

Modern, lightweight toast notifications for JavaScript

Demo · Documentation

Features

• Lightweight — ~2KB minified, zero dependencies
• 6 Themes — Success, error, warning, info, dark, light
• 7 Positions — All corners, centers, and center
• Confirmations — Interactive dialogs with async support
• Input Prompts — Text input with validation
• Glassmorphism — Modern blur effects
• Accessible — ARIA support, keyboard navigation
• Framework Agnostic — Works everywhere

Installation

npm install toastify-pro

Or use CDN:

<script src="https://cdn.jsdelivr.net/npm/toastify-pro/dist/toastify-pro.umd.min.js"></script>

Quick Start

import ToastifyPro from 'toastify-pro';

const toast = new ToastifyPro();

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

// With description
toast.success('File uploaded', { description: 'document.pdf is ready' });

Confirmation Dialogs

// Simple
toast.conf('Delete this item?', (confirmed) => {
  if (confirmed) toast.success('Deleted!');
});

// With options
toast.conf('Save changes?', {
  description: 'This cannot be undone',
  confirmText: 'Save',
  cancelText: 'Discard',
  theme: 'light'
}, (confirmed) => {
  if (confirmed) saveData();
});

// Async loading
toast.conf('Submit form?', {
  onConfirm: async ({ setLoading, close }) => {
    setLoading(true);
    await fetch('/api/submit', { method: 'POST' });
    close();
    toast.success('Submitted!');
  }
});

Input Prompts

// Simple
toast.input('What is your name?', (value) => {
  toast.success(`Hello, ${value}!`);
});

// With validation
toast.input('Enter email', {
  type: 'email',
  placeholder: '[e-mail]',
  validate: (val) => val.includes('@') || 'Invalid email',
  onSubmit: async (email) => {
    await subscribe(email);
    toast.success('Subscribed!');
  }
});

Custom Colors

// Gradient toast
toast.custom('Custom styled!', {
  primaryColor: '#8b5cf6',
  secondaryColor: '#6366f1'
});

// Gradient confirmation
toast.conf('Continue?', {
  primaryColor: '#f97316',
  secondaryColor: '#ea580c'
});

API Reference

Constructor

const toast = new ToastifyPro({
  position: 'bottom-center',  // Position on screen
  timeout: 3000,              // Auto-dismiss (0 to disable)
  allowClose: true,           // Show close button
  pauseOnHover: true,         // Pause timeout on hover
  maxToasts: 0,               // Max visible (0 = unlimited)
  newestOnTop: true           // Stack order
});

Positions

top-left · top-center · top-right · bottom-left · bottom-center · bottom-right · center

Methods

Method	Description
success(msg, opts?)	Green success toast
error(msg, opts?)	Red error toast
warning(msg, opts?)	Orange warning toast
info(msg, opts?)	Blue info toast
dark(msg, opts?)	Dark theme toast
light(msg, opts?)	Light theme toast
custom(msg, opts?)	Custom colors
conf(msg, opts?, cb?)	Confirmation dialog
input(msg, opts?, cb?)	Input prompt
dismissAll(type?)	Dismiss all toasts

Toast Options

{
  description: 'Secondary text',
  timeout: 5000,
  allowClose: true,
  action: {
    label: 'Undo',
    onClick: ({ close }) => { /* ... */ }
  }
}

Confirmation Options

{
  description: 'Details text',
  confirmText: 'Confirm',
  cancelText: 'Cancel',
  theme: 'dark',           // 'dark' | 'light'
  position: 'center',
  primaryColor: '#6366f1', // Custom gradient
  secondaryColor: '#8b5cf6',
  onConfirm: (helpers) => {},
  onCancel: () => {}
}

Input Options

{
  description: 'Help text',
  placeholder: 'Enter value...',
  submitText: 'Submit',
  cancelText: 'Cancel',
  type: 'text',            // 'text' | 'email' | 'password' | 'number' | 'url'
  defaultValue: '',
  required: true,
  validate: (val) => true, // Return true or error string
  theme: 'dark',
  primaryColor: '#6366f1',
  onSubmit: (value, helpers) => {},
  onCancel: () => {}
}

Browser Support

Chrome, Firefox, Safari, Edge (all modern versions)

License

MIT © Abhishek Potter