🔔 ToastNotification

A lightweight, customizable, and dependency-free toast notification system written in vanilla JavaScript.

License: Proprietary - See LICENSE file. This is NOT open source software.

📦 Include package via cdn

<script src="https://cdn.jsdelivr.net/npm/@tsirosgeorge/[email protected]/toast.min.js"></script>

📦 Include package via npm

npm i @tsirosgeorge/toastnotification

💡 Usage instructions

🔹 Basic Toast

toast('Hello world!');

🔸 With Options

toast('Data saved successfully!', {
  type: 'success',
  position: 'top-left',
  duration: 5000,
  animation: 'slide-right',
  icon: '✅',
  showLoader: true,
  onClick: () => alert('Toast clicked!'),
  onShow: () => console.log('Toast shown'),
  onDismiss: () => console.log('Toast dismissed')
});

✅ Convenience helpers

toast.success('Saved!');
toast.error('Failed!');

⚠️ Confirm (SweetAlert-like)

• Promise API

const ok = await toast.confirm('This will delete the file.', {
  title: 'Are you sure?',
  type: 'warning',
  confirmText: 'Yes, delete',
  cancelText: 'Cancel',
  useOverlay: true,
  closeOnOverlayClick: true,
  showClose: true,
  // optional custom button colors
  confirmButtonBg: '#10b981',
  confirmButtonColor: '#fff',
  cancelButtonBg: '#e5e7eb',
  cancelButtonColor: '#1f2937',
});
if (ok) {
  // proceed
}

• With Input Field

const name = await toast.confirm('Enter your name:', {
  title: 'Welcome',
  input: 'text',  // 'text', 'email', 'password', 'number', 'textarea'
  inputPlaceholder: 'Your name here...',
  inputValue: '',  // optional default value
  confirmText: 'Submit',
  cancelText: 'Cancel',
});
if (name) {
  console.log('Hello', name);
} else {
  console.log('Cancelled');
}

• Callback API

toast('Are you sure?', {
  mode: 'confirm',
  type: 'warning',
  title: 'Confirm action',
  onConfirm: () => console.log('YES'),
  onCancel: () => console.log('NO'),
});

⏳ Loading → Update

const t = toast.loading('Uploading…', { type: 'info' });
// later
t.update('Done!', { type: 'success', duration: 2000 });

🛠️ Available Options

| Option | Type | Default | Description | |--------------|------------|---------------|-----------------------------------------------------------------------------------------------| | position | string | 'top-right' | Container position. Values: 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'. | | animation | string | 'slide-right' | Show animation. Examples: 'slide-right', 'slide-left', 'slide-top', 'slide-bottom', 'zoom-in'. Hide uses reverse automatically. | | type | string | 'info' | Type of toast, controlling icon and styling. Possible values: 'info', 'success', 'error', 'warning'. | | duration | number | 3000 | Duration in milliseconds before the toast automatically dismisses. | | icon | string or null | null | Optional custom icon displayed as text (e.g., emoji) before the toast message. If not set, a default GIF icon is used based on the type. | | showLoader | boolean | false | Whether to show a loader/progress bar animation on the toast during its visible duration. | | onClick | function or null | null | Callback function executed when the toast is clicked. | | onShow | function or null | null | Callback function executed when the toast appears (after it's added to the DOM and shown). | | onDismiss | function or null | null | Callback function executed when the toast is dismissed and removed from the DOM. |

🧩 Confirm-specific options

| Option | Type | Default | Description | |-------|------|---------|-------------| | mode | "confirm" \| "swal" | — | Set to show a confirm dialog with Yes/No buttons. | | title | string | null | Optional heading shown above the message. | | confirmText | string | "Yes" | Confirm button label. | | cancelText | string | "No" | Cancel button label. | | input | string \| false | false | Input field type: 'text', 'email', 'password', 'number', 'textarea', or false for no input. | | inputPlaceholder | string | "" | Placeholder text for the input field. | | inputValue | string | "" | Default value for the input field. | | useOverlay | boolean | true | Dim the background and center the dialog. | | closeOnOverlayClick | boolean | true | Clicking the overlay cancels. | | showClose | boolean | false | Show a top-right × button. | | confirmButtonBg | string | null | Inline background color for confirm button. | | confirmButtonColor | string | null | Inline text color for confirm button. | | cancelButtonBg | string | null | Inline background color for cancel button. | | cancelButtonColor | string | null | Inline text color for cancel button. |

🧪 Live Demo

Open the online demo to try all options: https://tsirosgeorge.github.io/toast-notification/

📝 License

© 2025 George Tsiros. All rights reserved.

This software is provided for use only as distributed by the author.

❌ Restrictions

• Modifying or creating derivative works is not allowed.
• Redistributing, sublicensing, or reselling the software is prohibited.
• Reverse engineering or extracting the source code is strictly forbidden.

⚠️ Disclaimer

This software is provided "as is", without warranty of any kind. Use at your own risk.

📬 For commercial licensing or inquiries, please contact the author at: [email protected]

Note: See the LICENSE file included in this package for full terms and conditions.