Notification Center (v1.0.7)

Notification Center is a lightweight JavaScript library for displaying beautiful, customizable notifications powered by Tailwind CSS.

🚀 Features

• Supports Success, Warning, and Error notifications.
• Uses Tailwind CSS for styling.
• Positioning support using Tailwind utility classes.
• Custom classes support → now you can add your own classes for notification containers.
• Auto-dismiss after a set duration.
• Smooth animations and transitions.
• Lightweight and easy to integrate.
• Supports Toast notifications
• Supports Dialog notifications as popups.

📦 Installation

Install via NPM:

npm install @madhusha_99/notification-center

Customizable Options

Below are the customizable options for notifications:

Option	Type	Description
title	string	The title of the notification
titleColor	string	Color of the title text
text	string	The content of the notification
textColor	string	Color of the text content
class	string	Custom CSS/Tailwind class for the container (NEW)
type	string	Notification type (success, error, warning)
toast	boolean	Whether it should be a toast notification
position	string	Tailwind-based position (top-3 right-3, etc.)
duration	number	Display duration (ms)
icon	string	Custom icon (SVG/HTML). If omitted, uses defaults
alertColor	string	Base color (affects border & background)
alertWidth	string	Width of the notification
alertHeight	string	Height of the notification
showCloseButton	boolean	Show a close button
showCancelButton	boolean	Show a cancel button (dialogs)
showConfirmButton	boolean	Show a confirm button (dialogs)
confirmButtonText	string	Confirm button text
cancelButtonText	string	Cancel button text
confirmButtonColor	string	Confirm button background color
cancelButtonColor	string	Cancel button background color
confirmButtonClass	string	Custom class for confirm button
cancelButtonClass	string	Custom class for cancel button

📌 Usage

📦 Importing and Initializing

You can import Toast and Dialog in two ways, depending on your preference and project structure.

Option 1: Import from a Single Entry Point

Import both components from the main module:

import { Toast, Dialog } from '@madhusha_99/notification-center';

This approach is simple and keeps your imports organized in one place.

---

Option 2: Import Individual Components

Import each component separately if you prefer modular imports:

import Toast from '@madhusha_99/notification-center/core/Toast';
import Dialog from '@madhusha_99/notification-center/core/Dialog';

Useful for selective imports and potentially better tree-shaking in certain build setups.

---

Global Initialization

To initialize notifications globally, add the following setup:

import { Toast, Dialog } from '@madhusha_99/notification-center';

declare global {
  interface Window {
    notify: Toast; // you can use global variable name as you want
    dialog: Dialog;
  }
}

window.notify = new Toast();
window.dialog = new Dialog();

or

import { Toast, Dialog } from '@madhusha_99/notification-center';

window.notify = new Toast(); // you can use global variable name as you want
window.dialog = new Dialog();

Single Instance Initialization

To use notifications without global initialization, you can create individual instances:

import { Toast, Dialog } from '@madhusha_99/notification-center';

const notify = new Toast(); //you can use constable variable name as you want
const dialog = new Dialog();

---

Displaying Notifications

Toast Notification

You can trigger notifications using:

notify.show({
  title: "Success!",
  text: "Your action was successful.",
  type: "success",
  duration: 3000
});

notify.warning({
  title: "Warning!",
  text: "Please be careful.",
  position: "top-3 right-3",
  type: "warning",
  duration: 3000
});

notify.error({
  title: "Error!",
  text: "Something went wrong!",
  position: "top-3 right-3",
  type: "error",
  duration: 3000
});

notify.show({
  title: "Error!",
  text: "Something went wrong!",
  class: "fixed top-3 right-3 bg-red-50 !border-red-400 border-l-4 rounded-md shadow-md !p-4 flex items-center transition-all transform translate-x-full opacity-0 w-80 lg:w-100",
  position: "top-3 right-3",
  type: "error",
  duration: 3000
});

Dialog Notification

Light mode

Dark mode

dialog.show({
  title: "Are you sure?",
  text: "This action cannot be undone.",
  showCancelButton: true,
  confirmButtonText: "Yes, proceed",
  cancelButtonText: "Cancel"
});

---

Handling User Actions with Promises

The dialog.show() method returns a Promise, allowing you to handle user actions asynchronously like a true tech geek! 🚀

dialog.show({
  title: "Confirm Action",
  text: "Are you sure you want to proceed?",
  showConfirmButton: true,
  showCancelButton: true,
  confirmButtonText: "Yes",
  cancelButtonText: "No"
}).then((result) => {
  if (result) {
    console.log("User confirmed the action!");
  } else {
    console.log("User canceled the action.");
  }
});

---

3️⃣ Example with Buttons

<button class="bg-green-500 p-3 border-1 border-gray outline-none text-white cursor-pointer"
  onclick="notify.success({title: 'Success!', text: 'Your action was successful!', position: 'top-3 right-3', duration: 3000})">
  Show Success Notification
</button>

<button class="bg-yellow-500 p-3 border-1 border-gray outline-none text-white cursor-pointer"
  onclick="notify.warning({title: 'Warning!', text: 'This is a warning message.', position: 'top-3 left-3', duration: 3000})">
  Show Warning Notification
</button>

<button class="bg-red-500 p-3 border-1 border-gray outline-none text-white cursor-pointer"
  onclick="notify.error({title: 'Error!', text: 'Something went wrong!', position: 'bottom-3 left-3', duration: 3000})">
  Show Error Notification
</button>

---

🎨 Tailwind CSS Integration

This package requires Tailwind CSS to work properly. Ensure Tailwind is included in your project:

1. Install Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

2. Add Tailwind to your CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

3. Use Tailwind classes for positioning notifications:

• top-3 right-3 → Top Right
• top-3 left-3 → Top Left
• bottom-3 right-3 → Bottom Right
• bottom-3 left-3 → Bottom Left

---

Using Tailwind CSS CDN

If you prefer using Tailwind without NPM, include the following in your HTML:

  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>

success(options), warning(options), error(options)

Shortcut methods for common notifications.

---

License

This package is licensed under the MIT License - see the LICENSE file for details.