Package Exports
- @rato-guras-technology/rg-toast-and-confirmation
- @rato-guras-technology/rg-toast-and-confirmation/dist/index.esm.js
- @rato-guras-technology/rg-toast-and-confirmation/dist/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@rato-guras-technology/rg-toast-and-confirmation) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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.