SweetAlert2 (Advance version of SweetAlert)

0 0 2 minutes read

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

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' }}>
                zambiatek
            </h1>
            <h3>SweetAlert2 in React</h3>
            <SweetAlert2 />
        </div>
    );
}

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' }}>
                zambiatek
            </h1>
            <h3>SweetAlert2 in React</h3>
            <SweetAlert2 />
        </div>
    );
}

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!