CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-sweetalert2

A beautiful, responsive, customizable and accessible replacement for JavaScript's popup boxes

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

SweetAlert2

SweetAlert2 is a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. It provides zero-dependency alert, confirm, prompt, and toast notifications with extensive customization options and comprehensive API controls.

Package Information

  • Package Name: sweetalert2
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install sweetalert2
  • CDN: Available via unpkg, jsDelivr, and other CDNs

Core Imports

import Swal from 'sweetalert2';

For CommonJS:

const Swal = require('sweetalert2');

Alternative named import (ES modules):

import { default as Swal } from 'sweetalert2';

Basic Usage

import Swal from 'sweetalert2';

// Simple alert
await Swal.fire('Hello world!');

// Alert with icon and text
await Swal.fire('Success!', 'Your changes have been saved.', 'success');

// Confirmation dialog
const result = await Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Yes, delete it!'
});

if (result.isConfirmed) {
  Swal.fire('Deleted!', 'Your file has been deleted.', 'success');
}

// Toast notification
const Toast = Swal.mixin({
  toast: true,
  position: 'top-end',
  showConfirmButton: false,
  timer: 3000,
  timerProgressBar: true
});

Toast.fire({
  icon: 'success',
  title: 'Signed in successfully'
});

// Theme usage
await Swal.fire({
  title: 'Dark Theme Example',
  text: 'This popup uses the dark theme',
  icon: 'info',
  theme: 'dark'
});

// Declarative popup using bindClickHandler
Swal.bindClickHandler(); // Enables data-swal-template attribute

Architecture

SweetAlert2 is built around several key components:

  • Main API: The Swal namespace containing all static methods for creating and controlling popups
  • Options System: Comprehensive configuration through the SweetAlertOptions interface
  • Promise-based: All popup operations return promises with structured results
  • DOM Management: Complete control over popup elements and styling
  • Event System: Lifecycle hooks and event handlers for custom interactions
  • Timer System: Built-in auto-close functionality with progress indicators

Capabilities

Core Dialog Methods

Primary methods for creating and displaying popups with various configurations and interaction patterns.

function fire<T = any>(options: SweetAlertOptions): Promise<SweetAlertResult<Awaited<T>>>;
function fire<T = any>(title?: string, html?: string, icon?: SweetAlertIcon): Promise<SweetAlertResult<Awaited<T>>>;
function mixin(options: SweetAlertOptions): typeof Swal;

Dialog Creation and Management

DOM Element Access

Methods for accessing and manipulating specific popup elements for advanced customization and control.

function getContainer(): HTMLElement | null;
function getPopup(): HTMLElement | null;
function getTitle(): HTMLElement | null;
function getConfirmButton(): HTMLButtonElement | null;
function getDenyButton(): HTMLButtonElement | null;
function getCancelButton(): HTMLButtonElement | null;

DOM Element Access

State Management

Methods for checking popup state, controlling visibility, and managing loading states.

function isVisible(): boolean;
function isLoading(): boolean;
function close(result?: Partial<SweetAlertResult>): void;
function update(options: Pick<SweetAlertOptions, SweetAlertUpdatableParameters>): void;

State Management

Input Handling

Comprehensive input support including validation, various input types, and input state management.

function getInput(): HTMLInputElement | null;
function disableInput(): void;
function enableInput(): void;
function showValidationMessage(validationMessage: string): void;
function resetValidationMessage(): void;

Input Handling and Validation

Timer Control

Auto-close functionality with timer controls and progress indication capabilities.

function getTimerLeft(): number | undefined;
function stopTimer(): number | undefined;
function resumeTimer(): number | undefined;
function toggleTimer(): number | undefined;
function isTimerRunning(): boolean | undefined;
function increaseTimer(ms: number): number | undefined;

Timer Control

Utility Functions

Advanced utility functions for parameter validation and declarative popup triggering.

function bindClickHandler(attribute?: string): void;
function isValidParameter(paramName: string): paramName is keyof SweetAlertOptions;
function isUpdatableParameter(paramName: string): paramName is SweetAlertUpdatableParameters;
function argsToParams(params: SweetAlertArrayOptions | readonly [SweetAlertOptions]): SweetAlertOptions;

Usage Examples:

// Enable declarative popups with custom attribute
Swal.bindClickHandler('data-my-alert');

// Validate parameter names programmatically  
if (Swal.isValidParameter('title')) {
  console.log('title is a valid parameter');
}

// Check if parameter can be updated
if (Swal.isUpdatableParameter('theme')) {
  Swal.update({ theme: 'dark' });
}

// Convert array parameters to options object
const options = Swal.argsToParams(['Hello', 'World', 'success']);

Core Types

interface SweetAlertResult<T = any> {
  readonly isConfirmed: boolean;
  readonly isDenied: boolean;
  readonly isDismissed: boolean;
  readonly value?: T;
  readonly dismiss?: Swal.DismissReason;
}

enum DismissReason {
  cancel = 'cancel',
  backdrop = 'backdrop',
  close = 'close',
  esc = 'esc',
  timer = 'timer'
}

type SweetAlertIcon = 'success' | 'error' | 'warning' | 'info' | 'question';

type SweetAlertPosition = 
  | 'top' | 'top-start' | 'top-end' | 'top-left' | 'top-right'
  | 'center' | 'center-start' | 'center-end' | 'center-left' | 'center-right'
  | 'bottom' | 'bottom-start' | 'bottom-end' | 'bottom-left' | 'bottom-right';

type SweetAlertInput = 
  | 'text' | 'email' | 'password' | 'number' | 'tel' | 'search' | 'range'
  | 'textarea' | 'select' | 'radio' | 'checkbox' | 'file' | 'url'
  | 'date' | 'datetime-local' | 'time' | 'week' | 'month';

type SweetAlertTheme = 
  | 'light' | 'dark' | 'auto' | 'minimal' | 'borderless' | 'embed-iframe' 
  | 'bulma' | 'bulma-light' | 'bulma-dark';

type SweetAlertEventName = 
  | 'didRender' | 'willOpen' | 'didOpen' | 'willClose' | 'didClose' | 'didDestroy';

type SweetAlertArrayOptions = readonly [string?, string?, SweetAlertIcon?];

type SweetAlertGrow = 'row' | 'column' | 'fullscreen' | false;

Global Constants

const version: string; // SweetAlert2 version string
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/sweetalert2@11.23.x
Publish Source
CLI
Badge
tessl/npm-sweetalert2 badge