Hoy vamos a ver cómo mostrar una notificación o Toast usando React. Esta notificación puede venir de cualquier lugar o servir para reaccionar a una acción del usuario.
Por ejemplo, podemos mostrar un mensaje de éxito o mensaje de error al enviar un formulario, entre otras cosas.
No vamos a ver cómo enviar y recibir notificaciones con sockets o esas cosas, sino simplemente una librería para mostrar Toasts o mensajes emergentes en React.
Una librería que yo he usado para algunos proyectos es React-Toastify. Se instala con:
npm install --save react-toastify
Ahora debemos importar tanto su CSS como el componente en donde el toast se va a montar:
Ahora podemos mostrar una notificación de manera sencilla. Es importante que dentro de nuestro componente coloquemos el contenedor de Toast <ToastContainer>
.
Por ejemplo, yo lo tengo en un formulario:
Fíjate en la línea 5, estoy definiendo el contenedor dentro de mi div
. Ahora es fácil mostrar un Toast desde JavaScript, basta con invocar a toast
. En mi caso lo hago cuando el envío del formulario es exitoso:
Estas notificaciones en React son totalmente personalizables, puedes enviar una de éxito, error, advertencia, etcétera.
En la documentación oficial puedes encontrar más opciones de personalización. Yo lo he usado en la conexión que hice con PHP y en la app con la pila MERN. Recuerda que puedes leer más sobre React en mi blog.
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.