Como Criar Mensagens Toast em React com Toastify

Notificações toast são alertas rápidos e não intrusivos que mantêm os usuários informados sem interromper seu fluxo de trabalho. O React-Toastify simplifica a implementação dessas notificações, equilibrando facilidade de uso com personalização.

Começando com React-Toastify

Instalação

Instale o React-Toastify:

npm install react-toastify
# ou
yarn add react-toastify

Configuração Básica

Importe os componentes necessários e o CSS:

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

Coloque o ToastContainer em seu App principal:

function App() {
  return (
    <div>
      <button onClick={() => toast(""Olá, Toastify!"")}>Notificar</button>
      <ToastContainer />
    </div>
  );
}

Tipos de Notificações Toast

Use tipos específicos de toast para maior clareza:

• Sucesso: toast.success(""Salvo com sucesso!"");
• Erro: toast.error(""Ocorreu um erro!"");
• Aviso: toast.warning(""Verifique sua entrada!"");
• Informação: toast.info(""Atualização disponível!"");
• Padrão: toast(""Mensagem neutra"");

Personalizando Notificações Toast

Posicionamento

Personalize as posições do toast:

toast(""Mensagem"", { position: ""bottom-center"" });

As posições incluem top-right, top-center, top-left, bottom-right, bottom-center e bottom-left.

Estilização

Aplique estilos personalizados:

toast(""Toast estilizado"", { className: ""custom-toast"" });

Exemplo de CSS:

.custom-toast {
  background: navy;
  color: white;
  border-radius: 4px;
}

Estilização Condicional

Estilize com base no tipo:

const notify = (type, message) => {
  toast[type](message, { className: `${type}-toast` });
};

Recursos Avançados

Toasts Baseados em Promessas

Lide com operações assíncronas facilmente:

const promise = fetch('url').then(res => res.json());
toast.promise(promise, {
  pending: ""Carregando..."",
  success: ""Carregado com sucesso!"",
  error: ""Falha ao carregar dados.""
});

Conteúdo Personalizado

Inclua componentes React:

toast(<div>Conteúdo HTML personalizado <button onClick={() => alert('Clicado!')}>Clique</button></div>);

Central de Notificações

Acompanhe notificações facilmente:

import { useNotificationCenter } from 'react-toastify/addons/use-notification-center';

const NotificationCenter = () => {
  const { notifications, markAllAsRead } = useNotificationCenter();
  return (
    <div>
      <button onClick={markAllAsRead}>Marcar todas como lidas</button>
      {notifications.map(n => <div key={n.id}>{n.content}</div>)}
    </div>
  );
};

Melhores Práticas

• Use com Moderação: Evite sobrecarregar os usuários.
• Escolha Tipos Apropriados: Comunique claramente a intenção da mensagem.
• Defina a Duração com Cuidado: Mensagens importantes requerem maior visibilidade.
• Acessibilidade: Garanta conteúdo legível e contraste claro.
• Mensagens Concisas: Indique claramente o que é necessário.

Exemplo de Implementação 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 os campos são obrigatórios!"");
      return;
    }

    const saveData = new Promise((resolve, reject) => {
      setTimeout(() => {
        data.email.includes(""@"") ? resolve() : reject();
      }, 1500);
    });

    toast.promise(saveData, {
      pending: ""Salvando..."",
      success: ""Perfil atualizado!"",
      error: ""Email inválido!""
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type=""text""
        placeholder=""Nome de usuário""
        value={data.username}
        onChange={(e) => setData({ ...data, username: e.target.value })}
      />
      <input
        type=""email""
        placeholder=""Email""
        value={data.email}
        onChange={(e) => setData({ ...data, email: e.target.value })}
      />
      <button type=""submit"">Enviar</button>
      <ToastContainer />
    </form>
  );
}

Conclusão

O React-Toastify ajuda a criar notificações eficazes e não intrusivas em aplicativos React. Sua simplicidade e flexibilidade permitem integração rápida, permitindo personalização profunda para atender às necessidades do seu aplicativo.

Perguntas Frequentes

Posso usar componentes React personalizados nas notificações toast?

Sim, o React-Toastify suporta componentes React personalizados como conteúdo de toast.

Como fazer notificações persistirem até serem descartadas?

Configure `autoClose: false` nas opções do toast para que as notificações persistam.

Posso atualizar toasts existentes?

Sim, use `toast.update(toastId, options)` com o ID do toast.

Como lidar com múltiplos toasts simultaneamente?

Use a propriedade `limit` no `ToastContainer` para controlar notificações simultâneas.

O React-Toastify suporta SSR?

Sim, garanta importações e renderização do lado do cliente, especialmente com frameworks como Next.js.