How to Use SweetAlert2 for Creating Beautiful and Accessible Popups

Introduction

SweetAlert2 is a popular JavaScript library that provides a beautiful, responsive, and highly customizable replacement for JavaScript’s popup boxes. It’s designed to be accessible (WAI-ARIA compliant) and has zero dependencies. In this article, we’ll walk you through the steps to get started with SweetAlert2 and create stunning popups for your web projects.

Step 1: Setting Up SweetAlert2

1. Include SweetAlert2 in Your Project:

You can include SweetAlert2 in your project by adding the following script tag to your HTML file:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

2. Initialize SweetAlert2:

To initialize SweetAlert2, add the following script to your JavaScript file:

Swal.fire({
  title: 'Hello!',
  text: 'This is a beautiful SweetAlert2 popup!',
  icon: 'success'
});

Step 2: Customizing SweetAlert2 Popups

1. Customize the Title and Text:

You can customize the title and text of the popup by modifying the title and text properties:

Swal.fire({
  title: 'Custom Title',
  text: 'Custom text goes here',
  icon: 'info'
});

2. Add Icons:

SweetAlert2 supports various icons such as success, error, warning, info, and question. You can set the icon using the icon property:

Swal.fire({
  title: 'Error!',
  text: 'Something went wrong!',
  icon: 'error'
});

3. Add Buttons:

You can add buttons to the popup and define their actions:

Swal.fire({
  title: 'Are you sure?',
  text: 'You won\'t be able to revert this!',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'No, keep it'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire('Deleted!', 'Your file has been deleted.', 'success');
  } else if (result.dismiss === Swal.DismissReason.cancel) {
    Swal.fire('Cancelled', 'Your file is safe.', 'info');
  }
});

Step 3: Using SweetAlert2 with React

1. Install SweetAlert2 for React:

You can install SweetAlert2 for React using npm:

npm install sweetalert2 react-sweetalert2

2. Create a SweetAlert2 Component:

Create a new component to use SweetAlert2 in your React application:

import React from 'react';
import Swal from 'sweetalert2';
import 'sweetalert2/src/sweetalert2.scss';

const SweetAlert = ({ title, text, icon }) => {
  const showSweetAlert = () => {
    Swal.fire({
      title: title,
      text: text,
      icon: icon
    });
  };

  return (
    <button onClick={showSweetAlert}>Show Alert</button>
  );
};

export default SweetAlert;

Step 4: Using SweetAlert2 with Angular

1. Install SweetAlert2 for Angular:

You can install SweetAlert2 for Angular using npm:

npm install ngx-sweetalert2

2. Create a SweetAlert2 Component:

Create a new component to use SweetAlert2 in your Angular application:

import { Component } from '@angular/core';
import { SweetAlert2 } from 'ngx-sweetalert2';

@Component({
  selector: 'app-sweet-alert',
  template: `<button (click)="showAlert()">Show Alert</button>`
})
export class SweetAlertComponent {
  constructor(private swal: SweetAlert2) {}

  showAlert() {
    this.swal.fire({
      title: 'Hello!',
      text: 'This is a SweetAlert2 popup in Angular!',
      icon: 'success'
    });
  }
}

React

Vue

Angular

Conclusion

SweetAlert2 is a powerful and flexible library for creating beautiful and accessible popups. By following the steps outlined in this article, you can easily integrate SweetAlert2 into your web projects and enhance the user experience with stunning popups.