notifyx v2.2.2

🎉 NotifyX - Lightweight, Framework-Agnostic Toast Notifications

A simple, customizable toast library for JavaScript/TypeScript with zero dependencies.

🚀 Features

✅ Framework Agnostic: Works with React, Vue, Angular, Svelte, or plain HTML/JS.
✅ TypeScript Support: Built-in types for seamless integration.
✅ Customizable: Adjust styles, positions, animations, and durations.
✅ Tailwind CSS Ready: Pre-styled with utility classes (override-friendly).
✅ Lightweight: ~2KB minified + gzipped.

📦 Installation

npm install notifyx
# or
yarn add notifyx
# or
bun add notifyx

# or via CDN
<script type="module">
import notifyx from 'https://cdn.jsdelivr.net/npm/notifyx@2.1.1/+esm'
</script>

🛠️ Usage

Basic Example

<!-- Include CSS (if not using a bundler) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notifyx@2.1.1/dist/notifyx.min.css">

<!-- Show a success toast -->
<script>
  NotifyX.success("Task completed successfully!");
</script>

Advanced Configuration

// In a TypeScript/ESM project
import { NotifyX } from 'notifyx';
import 'notifyx/dist/notifyx.min.css';

NotifyX.show({
  message: "User logged in",
  type: "success",
  duration: 5000,
  position: "bottom-left",
  dismissible: true,
  onClose: () => console.log("Toast closed!")
});

🎨 Customization

Positions

NotifyX.info("Message", { position: "top-right" });  // Default
NotifyX.success("Message", { position: "top-left" });
NotifyX.warning("Message", { position: "bottom-right" });
NotifyX.error("Message", { position: "bottom-left" });

CSS Variables

Override default styles globally:

:root {
  --toast-bg-success: #d4edda;
  --toast-bg-error: #f8d7da;
  --toast-color-info: #0c5460;
  --toast-duration: 3s;
}

📚 API Reference

Methods | Prototype | type | Default value | Description | | ------------- |:-------------:| -----:| -----:| | message | string | (Required) | The text to display in the toast.| | type | "success", "error", "warning", "info" | info | The type of toast (e.g., success, error, warning, info).| | duration | number | 3000 | Duration in milliseconds before the toast auto-dismisses.| |position | "top-right", "top-left", "bottom-right", "bottom-left" | top-right | Position of the toast on the screen. | dismissible | boolean | true | Whether the toast can be dismissed manually by the user. |

Options

interface ToastOptions {
  message: string;
  type?: "success" | "error" | "warning" | "info";
  duration?: number;    // Auto-dismiss timeout (ms)
  position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
  dismissible?: boolean; // Show close button
  onClose?: () => void;  // Callback after dismissal
}

📄 License

MIT License © 2024 Md A Awal Hadi