SweetAlert2 (versión avanzada de SweetAlert)

Sweet Alert se utiliza para hacer que un cuadro de alerta sea más atractivo y fácil de diseñar. El dulce JS proporciona métodos fáciles para diseñar y agregar muchas funciones al cuadro de alerta del sitio web simplemente llamando a la función de alerta dulce (en resumen, SWAL()).

¡Es un hermoso reemplazo para JavaScript que confirma el mensaje! Reemplazará el feo mensaje de confirmación con un hermoso modal personalizable y completamente funcional.
SweetAlert 2 es un avance de sweetAlert. SweetAlert2 también admite contenido HTML, mientras que el primero no.
Hay una dependencia independiente que debe instalarse para trabajar con SweetAlert2.

Sintaxis:

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

Construyamos un proyecto de reacción y mostremos el funcionamiento de sweetAlert2

Para crear una aplicación de reacción, siga los pasos a continuación:

Paso 1: Cree una aplicación de reacción usando el siguiente comando  

npx create-react-app foldername

Paso 2: una vez que haya terminado, cambie su directorio a la aplicación recién creada usando el siguiente comando  

cd foldername

Paso 3: Instale la dependencia requerida

npm install sweetalert2

Paso para ejecutar la aplicación: Ingrese el siguiente comando para ejecutar la aplicación.

npm start

Estructura del proyecto: El proyecto debería verse así:

Ejemplo 1: En este ejemplo, simplemente mostraremos sweetAlert2. En caso de éxito, mostrará un mensaje, ‘Encantado de conocerte’ y al cancelar, mostrará ‘Cancelado’. Escriba el siguiente código en App.js

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>
    );
}

Producción:

 

Ejemplo 2: En este ejemplo, mostraremos un contador. Aparecerá una alerta que le pedirá que incremente el valor del contador.

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>
    );
}

Producción: