PohzAlert Notification Library

PohzAlert is a lightweight, fully customizable Notification & Alert library designed for CRM-style admin interfaces. It is written with TypeScript compatibility in mind and has zero runtime dependencies.

✨ Demo

• https://alert-lib-d1f1f7.gitlab.io/

Features

• 🚀 Zero Dependencies – No external runtime libraries required
• ⚡ Lightweight – Small bundle size and fast
• 🎨 CRM Theme – Polished UI suitable for enterprise apps
• ⌨️ Keyboard Accessible – Esc, Enter, focus trapping
• 📱 Mobile Ready – Responsive and touch-friendly
• 🏗 TypeScript Ready – Includes type definitions

📦 Installation

NPM

npm install pohz-alert

Yarn

yarn add pohz-alert

🚀 Quick Start

ES Module (Modern Apps)

import Alert from 'pohz-alert';

const dialog = new Alert();

// Simple notifications
dialog.success('Success!', 'Data has been saved.');
dialog.error('Error', 'Unable to save data.');

// Confirmation dialog (returns a Promise)
async function handleDelete() {
  const result = await dialog.confirmDelete(
    'Are you sure?',
    'This action cannot be undone.'
  );

  if (result.confirmed) {
    console.log('Item deleted');
  }
}

Browser (UMD / CDN)

The UMD build file is named pohz-alert.umd.cjs in the dist/ directory.

<script src="https://unpkg.com/pohz-alert/dist/pohz-alert.umd.cjs"></script>
<script>
  const dialog = new window.PohzAlert();
  dialog.info('Hello!', 'Welcome to the admin panel.');
</script>

🛠 API Reference

Configuration Options

const dialog = new Alert({
  confirmButtonText: 'OK',
  cancelButtonText: 'Cancel',
  zIndex: 9999,
  width: '450px'
});

Methods

| Method | Description | | ------ | ----------- | | success(title, text) | Shows a success notification / dialog | | error(title, text) | Shows an error notification / dialog | | warning(title, text) | Shows a warning notification / dialog | | info(title, text) | Shows an informational notification / dialog | | confirmAction(title, text) | Confirmation dialog with primary action | | confirmDelete(title, text) | Danger confirmation with destructive action | | show(options) | Full custom dialog / notification control |

📦 Result Object

Dialog/confirmation methods return a Promise resolving to:

{
  confirmed: boolean,
  cancel: boolean,
  dismissed: boolean
}

⌨️ Accessibility

• role="dialog" and aria-modal="true"
• Focus trapping inside dialog
• Auto focus on confirm button
• Focus restoration after close

📄 License

MIT © Pohz