Implementación de notificaciones en React
Bienvenidos al post de Implementación de notificaciones en React, donde aprenderéis a implementar la librería de notificaciones react-hot-toast en React y poder así ofrecer un diseño mas llamativo a vuestras webs de cara al usuario.
Tendréis disponibles al final del post el código de GitHub, además de un link hacia el proyecto subido para que podáis ver la funcionalidad de las notificaciones.
Requerimientos
Para poder seguir el post correctamente, es necesario que tengáis un proyecto de React funcional.
React-Hot-Toast, instalación e importación
Empezamos por instalar la dependencia en nuestro proyecto mediante el comando:
npm install react-hot-toast
Una vez instalada, la importamos dentro del componente en el que vayamos a estar trabajando con la siguiente sentencia:
import toast, { Toaster } from "react-hot-toast";
Lo que estamos importando con la sentencia anterior es el método de la notificación, el toast, y la etiqueta que llamaremos desde el render, el Toaster.
Uso del método toast
Supongamos que en nuestro proyecto limpio React, donde el único componente que usamos es App y ya hemos importado toast y Toaster, queremos que nuestra web nada mas se inicie nos muestre una notificación, pues dentro del componentDidMount tenemos que poner toast seguido del tipo de notificación que nos gustaría y el texto a mostrar:
componentDidMount = () => {
// Se podria decir que .success es una de las varias
// notificaciones que ya vienen con un diseño propio.
// Podremos encontrar mas en la documentación.
toast.success("Bienvenidos a mi web.");
// El siguiente toast nos permite modificar a nuestro
// gusto la notificación, mas info en la documentación.
toast("Esta notificación es diferente", {duration: 6000})
}
Tenemos muchas posibilidades con las notificaciones, dentro de la documentación de React-Hot-Toast se nos da ejemplos ya hechos y mas parámetros para editar.
Si quisiéramos que al terminar cualquier método se nos ejecutara una notificación en concreto pues tendríamos que devolver al finalizar el método toast.
Uso de la etiqueta Toaster
En nuestro componente principal debemos de llamar a Toaster dentro del render mediante <Toaster/>.
Al igual que toast, Toaster también tiene una gran variedad de atributos que podemos modificar a nuestro gusto, o simplemente podemos dejar la etiqueta sin atributos, la funcionalidad está ahí, todo ello podremos verlo en la documentación.
Resultado
Habiendo seguido los pasos que he mostrado, seria suficiente para que os funcionaran correctamente las notificaciones.
He de decir que este post valdría tanto para react-hot-toast como para cualquier otra librería de notificaciones, ya que al final casi todas funcionan de la misma manera, se importa la dependencia, llamamos a los métodos y plantamos la etiqueta en el render.
Autor: Rubén Pozuelo Martínez.
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma.
Centro: Tajamar.
Año académico: 2021-2022.
Código / recursos utilizados / Otros datos de interés:
- https://github.com/rpozuelo20/reactappfirepost
- https://reactappfirepost.herokuapp.com/
- https://react-hot-toast.com/
- https://www.linkedin.com/in/rub%C3%A9npozuelomart%C3%ADnez/