SweetAlert2 (Advance version of SweetAlert)

Sweet Alert is used to make an alert box more attractive and easier to design. The sweet JS Provides easy methods to design and add a lot of functionality to the alert box of the website by just calling the function of sweet alert (in short SWAL()).

It is a beautiful replacement for JavaScript confirming the message! It will replace the ugly confirmation message with a beautiful customizable and fully functional modal.
SweetAlert 2 is advance of sweetAlert. SweetAlert2 supports HTML content as well while the former does not.
There is an independent dependency that needs to be installed to work with SweetAlert2.

Syntax:

function SweetAlert2() {
    const fireAlert = () => {
        Swal.fire({
            ...
        }
        ).then((result) => {
           ...
        })
    }
}

Let’s build a react project and show the working of sweetAlert2

To build a react application follow the below steps:

Step 1: Create a react application using the following command  

npx create-react-app foldername

Step 2: Once it is done change your directory to the newly created application using the following command  

cd foldername

Step 3: Install Required Dependency

npm install sweetalert2

Step to run the application: Enter the following command to run the application.

npm start

Project Structure: The project should look like this:

Example 1: In this example, we will simply display sweetAlert2. On success, it will display a message, ‘Nice to meet you’ and on cancel it will display, ‘Cancelled’. Write the below code in App.js

Output:

 

Example 2: In this example, we will display a counter. An Alert will be popUp which will ask to increment the value of the counter.

Output: