Cómo crear alertas en React usando SweetAlert y React Toastify

Si estás buscando alertas en react, quédate porque en este post te enseñaré cómo implementarlas de forma clara y práctica. Como desarrolladores, necesitamos mantener informado al usuario sobre lo que ocurre mientras interactúa con una aplicación web; sin embargo, mostrar demasiada información puede resultar confuso o innecesario. En este punto, las alertas cumplen un rol clave para comunicar mensajes importantes en el momento adecuado.

En este post veremos cómo crear alertas en react utilizando dos librerías muy populares: SweetAlert, ideal para alertas tipo pop-up, y React Toastify, perfecta para notificaciones tipo toast que no interrumpen la experiencia del usuario. Veremos ejemplos prácticos y casos reales de uso para que puedas aplicarlas fácilmente en tus proyectos. Vamos a comenzar.

Lo que vas a necesitar

• Repositorio: haz click aquí para ver el respositorio en github que acompaña a este post y video en youtube.
• video: haz click aquí para ver el video de youtube.
• SweetAlert: haz click aquí para ver su documnetación.
• React Toastify: haz click aquí para ver su documentación.

Cómo instalar SweetAlert en nuestro proyecto

El primer paso para poder usar sweetAlert en nuestro proyecto inicia con su instalación. Recuerda tener tu proyecto de react activo y listo para este paso:

sudo npm install sweetalert2

El «sudo» siempre lo pongo ya que depende de los permisos que tengas gestionados en tu pc, puede que instale correctmente o no, y este comando nos permite saltarnos esos pasos y otorgar los permisos necesarios. A continuación, importa este a tu componente en react con:

import Swal from 'sweetalert2'

Una vez importado, debes colocarlo en alguna zona de tu proyecto, donde desees mostrar la alerta en React. En mi caso, desde el video que hice en youtube (link abajo) lo que hago es crear un formulario simple que suma 2 números y en la alerta muestra el resultado. Sin embargo hay 2 opciones para este caso, que muestro en el video, vamos a verlas.

Alerta sencilla con SweetAlert

function ejecutarSuma(event){
    event.preventDefault();

    const suma = Number(numeroUno) + Number(numeroDos);
    //ejecutar alerta 1
    Swal.fire({
      title: 'Resultado',
      text: 'El resultado de la suma es: ' + suma,
      icon: 'success',
      confirmButtonText: 'Cool'
    });

  }

Aquí podemos ver que esta alerta lo que nos permite es simplemente mostrar un texto, incluyendo en el «String», el valor del resultado de la sumatoria, y una vez oprimido el botón, sale de la alerta sin problema. Teniendo en cuenta que como lo vemos en la documentación, también podemos cambiar el tipo de ícono a esta alerta sencilla como: success, error, warning, info, question.

Alerta con botón de acción usando SweetAlert

function ejecutarSuma(event){
    event.preventDefault();

    const suma = Number(numeroUno) + Number(numeroDos);
  
    // ejecutar alerta con botón
    Swal.fire({
      title: 'Resultado',
      text: 'El resultado de la suma es: ' + suma,
      icon: 'success',
      confirmButtonText: 'Ir a cursos',
    }).then( (result) => {
      if(result.isConfirmed){
        //navigate("/");
        window.location.href = "https://eduardoarias.co/";
      }
    });

  }

En esta alerta, a comparación de la anterior podemos ver que se añade un botón de acción que permite redireccionar a otra página web (justamente esta), pero para lo cual, debemos implementarlo en «then», lo cual nos permite que, al finalizar, evaluar el proceso del usuario y saber que vió la alerta, y oprimió el botón para poder redireccionar.

Claramente aquí podemos jugar con lo que deseemos, en cuanto a funcionalidades, pero aquí vemos claramente que no es complejo.

Cómo instalar React Toastify en nuestro proyecto

En el caso de react toastify, lo que tenemos hacer como primer paso para su instalación es ejecutar el siguiente comando en nuestra terminal:

sudo npm i --save react-toastify

recordemos que siempre en mi caso, uso el «sudo», para evitar posibles errores. Ahora, continuando con el proceso, lo siguiente que tenemos que hacer es importarlo a nuestro proyecto asi:

import { ToastContainer, toast } from 'react-toastify';

Pero aquí pasa algo importante y es que adicional a la importación normal, debemos usar el contenedor dentro de nuestro componente de react. Esto con el fin de que visualmente se pueda observar. No es que en otras librerías tipo toast sea 100% necesario, pero en este caso, para esta justamente, si lo es.

Entonces lo importamos justamente dentro de nuestro componente principal, pero afuera de la información o componente clave, que en nuestro caso es el «form».

<ToastContainer />

Copia y pega el contenedor justo abajo del formulario y listo. Ahora, para continuar lo que vamos a hacer es modificar la función de suma, para que nos muestre el resultado final en el toast.

function ejecutarSuma(event){
    event.preventDefault();

    const suma = Number(numeroUno) + Number(numeroDos);
  
    // ejecutar toast
    toast.success("el resultado de la suma es: " + suma, {
      position: "bottom-center",
      autoClose: 3000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true
    });
  }

Como lo vemos, el toast tiene una implementación totalmente diferente ya que este puede depender de factores como el tiempo de cierre, si se hace o no click en el, entre otros. En este caso, modificaremos el texto igualmente para mostrar el resultado de la sumatoria.

y listo de esta manera podemos visualizar en la parte inferior centro, el toast con el resultado de la sumatoria. Concluyendo así un toast implementado correctamente.

Video de ayuda

Hice este video para guiarte en el proceso, haz click para verlo y si te gusta no olvides dar like y suscribirte para nuevos videos.

Producto sugerido

Uno de los mejores teclados del mercado, con firmware QMK, permitiendo que sea prácticamente 100% personalizable, desde teclas, luces, acciones por teclas, teclas duales, entre otros.

Conclusión

Implementar correctamente las alertas en react es un aspecto fundamental para mejorar la experiencia de usuario y la comunicación dentro de cualquier aplicación web. A lo largo de este post vimos cómo las alertas permiten informar acciones importantes, validar procesos y generar confianza durante la interacción del usuario con la aplicación.

Utilizando librerías como SweetAlert y React Toastify, es posible mostrar alertas claras, reutilizables y adaptadas a distintos contextos, ya sea mediante pop-ups o notificaciones tipo toast. Elegir la herramienta adecuada para cada caso te ayudará a mantener un equilibrio entre informar al usuario y no saturarlo con mensajes innecesarios.

Finalmente, recuerda que unas buenas alertas en react no solo cumplen una función técnica, sino que también influyen directamente en la percepción de calidad, profesionalismo y confianza de tu producto. Aplicar estas buenas prácticas marcará una diferencia real en tus proyectos.