Cómo Crear Mensajes Toast en React con Toastify

Las notificaciones toast son alertas rápidas y no intrusivas que mantienen a los usuarios informados sin interrumpir su flujo de trabajo. React-Toastify simplifica la implementación de estas notificaciones, equilibrando facilidad de uso con personalización.
Puntos Clave
- React-Toastify simplifica la adición de notificaciones toast.
- Admite múltiples tipos de notificaciones (éxito, error, advertencia, información).
- Posiciones y estilos personalizables.
- Ofrece funciones avanzadas como notificaciones basadas en promesas.
Primeros Pasos con React-Toastify
Instalación
Instala React-Toastify:
npm install react-toastify
# o
yarn add react-toastify
Configuración Básica
Importa los componentes necesarios y el CSS:
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
Coloca ToastContainer
en tu App principal:
function App() {
return (
<div>
<button onClick={() => toast(""¡Hola, Toastify!"")}>Notificar</button>
<ToastContainer />
</div>
);
}
Tipos de Notificaciones Toast
Utiliza tipos específicos de toast para mayor claridad:
- Éxito:
toast.success(""¡Guardado con éxito!"");
- Error:
toast.error(""¡Ha ocurrido un error!"");
- Advertencia:
toast.warning(""¡Verifica tu entrada!"");
- Información:
toast.info(""¡Actualización disponible!"");
- Predeterminado:
toast(""Mensaje neutral"");
Personalizando las Notificaciones Toast
Posicionamiento
Personaliza las posiciones de los toast:
toast(""Mensaje"", { position: ""bottom-center"" });
Las posiciones incluyen top-right
, top-center
, top-left
, bottom-right
, bottom-center
y bottom-left
.
Estilización
Aplica estilos personalizados:
toast(""Toast estilizado"", { className: ""custom-toast"" });
Ejemplo de CSS:
.custom-toast {
background: navy;
color: white;
border-radius: 4px;
}
Estilización Condicional
Estiliza según el tipo:
const notify = (type, message) => {
toast[type](message, { className: `${type}-toast` });
};
Funciones Avanzadas
Toasts Basados en Promesas
Maneja operaciones asíncronas sin problemas:
const promise = fetch('url').then(res => res.json());
toast.promise(promise, {
pending: ""Cargando..."",
success: ""¡Cargado con éxito!"",
error: ""Error al cargar datos.""
});
Contenido Personalizado
Incluye componentes de React:
toast(<div>Contenido HTML personalizado <button onClick={() => alert('¡Clic!')}>Clic</button></div>);
Centro de Notificaciones
Rastrea notificaciones fácilmente:
import { useNotificationCenter } from 'react-toastify/addons/use-notification-center';
const NotificationCenter = () => {
const { notifications, markAllAsRead } = useNotificationCenter();
return (
<div>
<button onClick={markAllAsRead}>Marcar todo como leído</button>
{notifications.map(n => <div key={n.id}>{n.content}</div>)}
</div>
);
};
Mejores Prácticas
- Usar con moderación: Evita abrumar a los usuarios.
- Elegir tipos apropiados: Comunica claramente la intención del mensaje.
- Establecer duración cuidadosamente: Los mensajes importantes requieren mayor visibilidad.
- Accesibilidad: Asegura contenido legible y contraste claro.
- Mensajes concisos: Indica claramente lo que se necesita.
Ejemplo de Implementación Completa
import React, { useState } from ""react"";
import { ToastContainer, toast } from ""react-toastify"";
import ""react-toastify/dist/ReactToastify.css"";
function ProfileForm() {
const [data, setData] = useState({ username: """", email: """" });
const handleSubmit = (e) => {
e.preventDefault();
if (!data.username || !data.email) {
toast.warning(""¡Todos los campos son obligatorios!"");
return;
}
const saveData = new Promise((resolve, reject) => {
setTimeout(() => {
data.email.includes(""@"") ? resolve() : reject();
}, 1500);
});
toast.promise(saveData, {
pending: ""Guardando..."",
success: ""¡Perfil actualizado!"",
error: ""¡Correo electrónico inválido!""
});
};
return (
<form onSubmit={handleSubmit}>
<input
type=""text""
placeholder=""Nombre de usuario""
value={data.username}
onChange={(e) => setData({ ...data, username: e.target.value })}
/>
<input
type=""email""
placeholder=""Correo electrónico""
value={data.email}
onChange={(e) => setData({ ...data, email: e.target.value })}
/>
<button type=""submit"">Enviar</button>
<ToastContainer />
</form>
);
}
Conclusión
React-Toastify ayuda a crear notificaciones efectivas y no intrusivas en aplicaciones React. Su simplicidad y flexibilidad permiten una integración rápida mientras posibilitan una personalización profunda para adaptarse a las necesidades de tu aplicación.
Preguntas Frecuentes
Sí, React-Toastify admite componentes personalizados de React como contenido de toast.
Establece `autoClose: false` en las opciones del toast para que las notificaciones persistan.
Sí, usa `toast.update(toastId, options)` con el ID del toast.
Usa la propiedad `limit` en `ToastContainer` para controlar las notificaciones simultáneas.
Sí, asegúrate de realizar las importaciones y el renderizado del lado del cliente, especialmente con frameworks como Next.js.