1.0.2 • Published 5 months ago

@rato-guras-technology/rg-toast-and-confirmation v1.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

Nepal Toast & Confirmation

A lightweight, customizable toast notification and confirmation dialog library with beautiful Nepal-themed styling.

Features

  • 🍞 Toast Notifications: Beautiful toast notifications with multiple types (success, error, warning, info, nepal)
  • 💬 Confirmation Dialogs: Elegant confirmation dialogs with customizable buttons and styling
  • 🎨 Fully Customizable: Customize positions, durations, animations, colors, and more
  • 📱 Responsive: Works perfectly on all device sizes
  • 🌙 Dark Mode: Automatic dark mode support
  • 🇳🇵 Nepal Theme: Special Nepal-themed styling and colors
  • 📦 TypeScript: Built with TypeScript for better development experience
  • 🚀 Zero Dependencies: No external dependencies required

Installation

```bash npm install @rato-guras-technology/rg-toast-and-confirmation ```

Quick Start

ES Modules

```javascript import { NepalToast, NepalConfirm } from '@rato-guras-technology/rg-toast-and-confirmation';

// Initialize toast const toast = new NepalToast();

// Show notifications toast.success('Success!', 'Operation completed successfully'); toast.error('Error!', 'Something went wrong'); toast.nepal('Welcome!', 'Namaste from Nepal 🇳🇵');

// Initialize confirmation const confirm = new NepalConfirm();

// Show confirmation dialog const result = await confirm.show({ title: 'Delete Item', message: 'Are you sure you want to delete this item?', type: 'danger' });

if (result) { console.log('User confirmed'); } ```

UMD (Browser)

```html

```

API Reference

NepalToast

Constructor Options

```typescript interface ToastSettings { position: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center"; duration: number; maxToasts: number; animationDuration: number; pauseOnHover: boolean; dismissible: boolean; progressBar: boolean; escapeHtml: boolean; } ```

Methods

  • success(title, message) - Show success toast
  • error(title, message) - Show error toast
  • warning(title, message) - Show warning toast
  • info(title, message) - Show info toast
  • nepal(title, message) - Show Nepal-themed toast
  • show(options) - Show custom toast
  • dismiss(id) - Dismiss specific toast
  • dismissAll() - Dismiss all toasts

NepalConfirm

Show Options

```typescript interface ConfirmOptions { title?: string; message?: string; type?: "danger" | "warning" | "info" | "success"; confirmText?: string; cancelText?: string; confirmIcon?: string; icon?: string; } ```

Methods

  • show(options) - Show confirmation dialog (returns Promise)
  • shake() - Shake the dialog for attention

Examples

Custom Toast Configuration

```javascript const toast = new NepalToast({ position: 'top-center', duration: 3000, maxToasts: 3, pauseOnHover: true });

toast.show({ title: 'Custom Toast', message: 'This is customized', type: 'nepal', duration: 8000, dismissible: true, progressBar: true }); ```

Advanced Confirmation

```javascript const result = await confirm.show({ title: 'Delete Account', message: 'This will permanently delete your account and all data.', type: 'danger', confirmText: 'Delete Forever', cancelText: 'Keep Account', confirmIcon: '⚠️' });

if (result) { // User confirmed deletion deleteAccount(); } else { // User cancelled console.log('Account deletion cancelled'); } ```

License

MIT © Rato Guras Technology

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1.0.2

5 months ago

1.0.1

5 months ago

1.0.0

5 months ago