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.

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

¿Puedo usar componentes personalizados de React en las notificaciones toast?

Sí, React-Toastify admite componentes personalizados de React como contenido de toast.

¿Cómo hacer que las notificaciones persistan hasta que sean descartadas?

Establece `autoClose: false` en las opciones del toast para que las notificaciones persistan.

¿Puedo actualizar toasts existentes?

Sí, usa `toast.update(toastId, options)` con el ID del toast.

¿Cómo manejar múltiples toasts simultáneamente?

Usa la propiedad `limit` en `ToastContainer` para controlar las notificaciones simultáneas.

¿React-Toastify es compatible con SSR?

Sí, asegúrate de realizar las importaciones y el renderizado del lado del cliente, especialmente con frameworks como Next.js.