Creacion de Modales en React con SweetAlert2

Usos de SweetAlert2

A la hora de crear modales, popups y alertas con Javascript, pueden utilizarse diferentes bibliotecas u opciones. Una de esas bibliotecas es SweetAlert2.

SweetAlert2 es una biblioteca que esta pensada para poder utilizarse junto a JavaScript Vanilla. Al estar pensado para usarse de esa manera, también funciona con React, Vue y Angular, aunque en este post se utilizara con React.

Todo el código creado para esta explicación se puede encontrar en el siguiente repositorio de GitHub.

Instalar y crear modales

Instalando SweetAlert2 en React

Para instalar SweetAlert2 y poder utilizarlo con React es necesario ejecutar el siguiente comando en la consola desde la carpeta donde este el proyecto de React.

npm install --save sweetalert2 sweetalert2-react-content

Una vez que se hallan terminado de instalar todas los paquetes y dependencias , ya se podrá empezar a trabajar.

Para trabajar con ello, es necesario importar en el componente la biblioteca, tal y como se muestra a continuación:

import Swal from "sweetalert2"

Ya con esto se puede empezar a crear un modal simple y sencillo como el siguiente:

Los modales suelen estar dentro de una función y son llamados con un evento. El código necesario para crear el modal anterior es el siguiente:

Como se puede ver, es sencillo crear el modal. Para crearlo es necesario llamar a la biblioteca con «swal.fire«. Ya dentro del paréntesis, se incluye el título del modal, el texto que mostrar y un icono. Este icono es uno de los que vienen incluidos con SweetAlert2. Los iconos que vienen incluidos son: «success», «error», «warning», «info» y «question».

Para que pueda ser llamado al renderizarse el componente, es necesario llamar a la función desde un boton.

<button onClick={this.modalBasico}>Modal basico</button>

Con esto, ya estaría terminado el primer modal.

Creando un modal con dos botones

Se pueden crear modales con diversos botones, y que estos, puedan llamar a otras funciones.

Al cerrar el mensaje de la función, mostrara un mensaje de exito:

El código necesario para poder realizar este modal es el siguiente:

  mostrarMensaje = () => {
    alert("Hola");
  };

  modalBotones = () => {
    Swal.fire({
      title: "Mostar mensaje",
      showDenyButton: true,
      denyButtonText: "Salir",
      denyButtonColor: "grey",
      confirmButtonText: "Mostrar",
      confirmButtonColor: "#4c4",
    }).then((res) => {
      if (res.isConfirmed) {
        Swal.fire("Mostrar", this.mostrarMensaje(), "success");
      }
      if (res.isDenied) {
        Swal.fire("Saliendo", "");
      }
    });
  };

Se incluye también el código de la función del mensaje. Para poder llamarlo desde un botón es necesario el siguiente código HTML:

 <button onClick={this.modalBotones}>Mostar</button>

Este modal es útil para utilizarse junto a un botón de eliminar de una aplicación, y que el usuario confirme si desea realizar una eliminación.

Modales con imágenes personalizadas

Es posible insertar una imagen cualquiera dentro de un modal. Para conseguirlo, se tiene que especificar la URL de la imagen, su altura, ancho y texto alternativo dentro de la declaración del modal:

Swal.fire({
      title: "Modal con imagen personalizada",
      text: "Esto es una imagen aleatorea.",
      imageUrl: "https://unsplash.it/400/200",
      imageWidth: 400,
      imageHeight: 200,
      imageAlt: "Custom image",
    });

Este modal selecciona una imagen aleatoria de un banco de imágenes, dando como resultado el siguiente modal.

La razón por la es útil esta opción, es debido a la experiencia del usuario (UX) al hacer click en algún botón. Aunque aquí se muestre una imagen aleatoria, bien podría se un icono de negación. De esta manera, se expande a los iconos que ya vienen con SweetAlert2.

Insertando valores en un modal

También se puede insertar texto, números o cualquier tipo de dato que pueda soportar la etiqueta HTML <input>. Dependiendo del tipo de dato, tendrá diferentes atributos.

 Swal.fire({
      title: "¿Cuántos años tienes?",
      icon: "question",
      input: "range",
      inputLabel: "Tu edad",
      inputAttributes: {
        min: 8,
        max: 120,
        step: 1,
      },
      inputValue: 25,
    });

El código anterior crea un modal que permite seleccionar una edad, para ello se hace uso de la propiedad range.

Los «inputAttributes» para otro tipo de input deben cambiarse cuando se desee utilizar otro. Al igual que se pueden seleccionar atributos, tambien se puede llamar a inputValidator. Con esto se podrán poner una serie de reglas para que se valide el valor insertado.

Modal con búsqueda asíncrona a una API

Utilizando lo visto anteriormente (Modales con varios botones, lectura de datos del usuario e imágenes personalizadas) y con ayuda de funciones asíncronas, se puede buscar información. Para este ejemplo se utilizara la API de GitHub.

El código necesario es el siguiente:

  modalAjax = () => {
    Swal.fire({
      title: "Introduzca un nombre de usuario de GitHub",
      input: "text",
      inputAttributes: {
        autocapitalize: "off",
      },
      showCancelButton: true,
      confirmButtonText: "Buscar",
      showLoaderOnConfirm: true,
      preConfirm: (user) => {
        return fetch(`//api.github.com/users/${user}`)
          .then((res) => {
            if (!res.ok) {
              throw new Error(res.statusText);
            }
            return res.json();
          })
          .catch((error) => {
            Swal.showValidationMessage(`Peticion fallida: ${error}`);
          });
      },
      allowOutsideClick: () => !Swal.isLoading(),
    }).then((res) => {
      if (res.isConfirmed) {
        Swal.fire({
          title: `Avatar de ${res.value.login}`,
          imageUrl: res.value.avatar_url,
        });
      }
    });
  };

El código anterior muestra un modal con una caja de texto y dos botones, tal y como muestra la siguiente imagen:

Al introducir un usuario y hacer click en el botón «Buscar», recuperará mediante una promesa, el resultado de la búsqueda y la mostrará en un modal. Mientras este realizándose la búsqueda, el botón de buscar se transformara en un ‘loader’. Esto último se hace utilizando showLoaderOnConfirm: true.

Además de eso, se desactiva la opción de cerrar el modal haciendo click fuera de este mientras este cargando. Esto se hace utilizando allowOutsideClick: () => !Swal.isLoading().

Creación de modales con SweetAlert2 Y React.
Autor: Mario Canales
Curso: Desarrollo Web Full Stack, Multicloud y Multiplataforma.
Centro: Tajamar.
Año académico: 2020-2021

Todo el código creado para esta explicación se puede encontrar en el siguiente repositorio de GitHub.