SweetAlert2 (Advance version of SweetAlert)

Sweet Alert is used to make an alert box more attractive and easier to design. 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()).

• Introduction to React
• React Hooks

Syntax:

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

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

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "sweetalert2": "^11.10.1",
    "web-vitals": "^2.1.4",
  }

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

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

npm start

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.

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

npm start

Output: