Jeinch SweetAlert2 Wrapper

A lightweight wrapper for SweetAlert2, providing five modular functions: swalSuccess, swalWarning, swalError, swalInfo, and swalConfirm. This package allows you to easily display alerts with global options and flexible parameters. It supports global options configuration for seamless integration with frameworks like Vite and Nuxt. Optimized for JavaScript and TypeScript for Frontend Template build by Jeinch.

Installation

Install the package via npm or yarn:

npm install jeinch-sweetalert2-wrapper

Or using pnpm:

pnpm add jeinch-sweetalert2-wrapper

Features

• Modular functions: Each function serves a specific type of alert. Easy-to-use wrapper functions:
  • swalSuccess: Displays an alert with a success icon.
  • swalWarning: Displays an alert with a warning icon.
  • swalError: Displays an alert with an error icon.
  • swalInfo: Displays an alert with an info icon.
  • swalConfirm: Displays an alert with a confirmation icon.
• HTML support: Pass HTML strings directly for rich content.
• Global configuration: Define global options once and reuse them across all alerts.
• Sanitization: Automatic sanitization of all parameters using DOMPurify to prevent XSS vulnerabilities.
• Default titles: Each alert type has a predefined title.

Usage

Importing the Functions

You can import the specific functions you need:

import { swalSuccess, swalError, swalInfo, swalWarning, swalConfirm, setGlobalOptions } from 'jeinch-sweetalert2-wrapper';

Example Usages

Simple Alerts

swalSuccess('This is a success message!');
swalError('An error occurred.');
swalInfo('Here is some information.');
swalWarning('Be cautious!');

Alerts with Options

swalSuccess('<span style="color: green;">Success with HTML!</span>', { showCancelButton: true });
swalConfirm('Are you sure?', { confirmButtonText: 'Proceed', cancelButtonText: 'Cancel' })
  .then((result) => {
    if (result.isConfirmed) {
      console.log('User confirmed!');
    } else {
      console.log('User canceled!');
    }
  });

Global Options

Define global options once in your project:

import { setGlobalOptions } from 'jeinch-sweetalert2-wrapper';

setGlobalOptions({
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
});

Now, all alerts will use these global settings unless overridden.

Preventing XSS with Automatic Sanitization

The wrapper automatically sanitizes all HTML inputs using DOMPurify. Example:

swalError('<img src=x onerror=alert("XSS")>'); // Malicious code

Will be sanitized to:

swalError('<img src="x">'); // Sanitized code

The above malicious code will be sanitized, ensuring application security.

Default Titles

Each alert type has a default title:

• swalSuccess: "Success"
• swalError: "Error"
• swalInfo: "Info"
• swalWarning: "Warning"
• swalConfirm: "Are you sure?"

TypeScript Support

This package provides type definitions for all exported functions, ensuring compatibility with TypeScript projects.

License

This package is licensed under the MIT License. MIT