React

Mostrar notificación Toast con React

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.

Instalando librería

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:

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

Mostrando Toast

Mostrar notificación con React

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:

render() {
    return (
        <div className="column is-one-third">
            <h1 className="is-size-3">Agregar videojuego</h1>
            <ToastContainer></ToastContainer>
            <form className="field" onSubmit={this.manejarEnvioDeFormulario}>
                <div className="form-group">
                    <label className="label" htmlFor="nombre">Nombre:</label>
                    <input autoFocus required placeholder="Nombre" type="text" id="nombre" onChange={this.manejarCambio} value={this.state.videojuego.nombre} className="input" />
                </div>
                <div className="form-group">
                    <label className="label" htmlFor="precio">Precio:</label>
                    <input required placeholder="Precio" type="number" id="precio" onChange={this.manejarCambio} value={this.state.videojuego.precio} className="input" />
                </div>
                <div className="form-group">
                    <label className="label" htmlFor="calificacion">Calificación:</label>
                    <input required placeholder="Calificación" type="number" id="calificacion" onChange={this.manejarCambio} value={this.state.videojuego.calificacion} className="input" />
                </div>
                <div className="form-group">
                    <button className="button is-success mt-2">Guardar</button>
                    &nbsp;
                    <Link to="/videojuegos/ver" className="button is-primary mt-2">Volver</Link>
                </div>
            </form>
        </div>
    );
}

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:

toast('Videojuego guardado 🎮', {
    position: "top-left",
    autoClose: 2000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    progress: undefined,
});

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.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.