JSPM

@rato-guras-technology/rg-toast-and-confirmation

1.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4
  • Score
    100M100P100Q30473F
  • License MIT

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

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 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.