@rato-guras-technology/rg-toast-and-confirmation v1.0.2
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 toasterror(title, message)- Show error toastwarning(title, message)- Show warning toastinfo(title, message)- Show info toastnepal(title, message)- Show Nepal-themed toastshow(options)- Show custom toastdismiss(id)- Dismiss specific toastdismissAll()- 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.