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()).

Prerequisite:

• Introduction to React
• React Hooks

Syntax:

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

Steps to Create the React Application And Installing Module:

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

Javascript

import React from 'react'
import Swal from 'sweetalert2'
import { useState } from 'react'
function SweetAlert2() {
    const fireAlert = () => {
        Swal.fire({
            title: 'I am Sweet Alert 2.',
            showConfirmButton: true,
            showCancelButton: true,
            confirmButtonText: "OK",
            cancelButtonText: "Cancel",
            icon: 'warning'
        }
        ).then((result) => {
            /* Read more about isConfirmed, isDenied below */
            if (result.isConfirmed) {

                Swal.fire('Nice to meet you', '', 'success');

            } else
                Swal.fire(' Cancelled', '', 'error')

        })
    }
    return (
        <div >
            <center>
                <button className="btn btn-primary"
                    onClick={fireAlert}>
                    Click me to see Sweet Alert 2
                </button>
            </center>
        </div>
    )
}

export default function App() {
    return (
        <div className="App">
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h3>SweetAlert2 in React</h3>
            <SweetAlert2 />
        </div>
    );
}

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.

Javascript

import React from 'react'
import Swal from 'sweetalert2'
import { useState } from 'react'
function SweetAlert2() {
    const [counter, setCounter] = useState(0);
    const fireAlert = () => {
        Swal.fire({
            title: 'I am Sweet Alert 2.',
            html: `
                <p> Can I increase counter?</p>
            `,
            showConfirmButton: true,
            showCancelButton: true,
            confirmButtonText: "Yes Increase",
            cancelButtonText: "Cancel",
            icon: 'warning'
        }
        ).then((result) => {
            /* Read more about isConfirmed, isDenied below */
            if (result.isConfirmed) {
                setCounter(counter + 1)
                Swal.fire('Counter Value Increased', '', 'success');

            } else
                Swal.fire(' Cancelled', '', 'error')
        })
    }
    return (
        <div >
            <center>
                <br></br>
                <strong> Counter Value:   </strong>
                <div style={{
                    padding: '2%',
                    background: '#308D46',
                    color: 'white',
                    fontWeight: 'bold',
                    borderRadius: '4%',
                    display: 'inline-block'
                }}>
                    {counter}
                </div>
                <br></br>
                <br></br>
                <button className="btn btn-primary"
                    onClick={fireAlert}>
                    Click me to see Sweet Alert 2
                </button>
            </center>
        </div>
    )
}

export default function App() {
    return (
        <div className="App">
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h3>SweetAlert2 in React</h3>
            <SweetAlert2 />
        </div>
    );
}

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

npm start

Output:

Output