🚀 PohzToast Notification Library

PohzToast is a lightweight, fully customizable Toast Notification library built for CRM-style admin interfaces. It is 100% TypeScript-ready and has zero runtime dependencies.

✨ Demo

• https://toast-lib-dc4ac4.gitlab.io/

✨ Key Features

• CRM-ready: color schemes and styles designed for admin dashboards
• Multiple themes: 8 built-in themes (Primary, Success, Danger, Warning, Info, Light, Dark, Gray)
• Two styles: bold (solid color) and light (soft color with border)
• Built-in SVG icons for each theme
• Smart stacking: manages toast order and limits visible toasts (maxToasts)
• Framework-agnostic: works with plain JavaScript and frameworks (React, Vue, Svelte, Next.js)
• SSR-safe: prevents errors during server-side rendering

📦 Installation

Install from npm:

npm install pohz-toast

Usage

1. Basic

Import the default instance and use the quick methods:

import toast from 'pohz-toast';

toast.success('Data saved successfully!');
toast.error('Connection failed');
toast.warning('Please check your input');
toast.info('You have a new message');

2. Advanced (show with options)

Use show() to control every option:

import toast from 'pohz-toast';

const id = toast.show({
  title: 'Confirm delete',
  text: 'This item will be permanently deleted. Are you sure?',
  theme: 'danger',
  style: 'light',
  position: 'top-center',
  duration: 5000,
  progressBar: true,
  onClick: (toastId) => {
    console.log(`Clicked toast: ${toastId}`);
    toast.hide(toastId);
  }
});

Options Reference

| Option | Type | Default | Description | |-------------|---------|-------------|-------------| | title | string | undefined | Title text (bold) | text | string | '' | Main message | position | string | 'top-right' | Positions: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right | duration | number | 3000 | Display time in ms (set 0 for persistent) | theme | string | 'primary' | Theme: success, danger, warning, info, primary, light, dark, gray | style | string | 'bold' | Display style: bold or light | icon | boolean | true | Show or hide icon | progressBar | boolean | false | Show progress bar | maxToasts | number | 5 | Max number of toasts on screen | zIndex | number | 99999 | z-index stacking value | closable | boolean | true | Show close [X] button

API Methods

• toast.success(message, options) — show success (green)
• toast.error(message, options) — show error (red)
• toast.warning(message, options) — show warning (orange)
• toast.info(message, options) — show info (blue)
• toast.show(options) — show custom toast (returns id)
• toast.update(id, options) — update a currently shown toast
• toast.hide(id) — hide a specific toast by id
• toast.hideAll() — hide all toasts

Framework Examples

Next.js (App Router) — TypeScript

"use client";
import toast from 'pohz-toast';

export default function Page() {
  return (
    <button onClick={() => toast.success('Next.js Ready!')}>
      Notify
    </button>
  );
}

Vue 3

<script setup>
import toast from 'pohz-toast';

const onSave = () => {
  toast.show({
    text: 'Data saved!',
    theme: 'success',
    style: 'light'
  });
};
</script>

📄 License

MIT © 2026 Pohz