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.
Principais Pontos
- React-Toastify simplifica a adição de notificações toast.
- Suporta múltiplos tipos de notificação (sucesso, erro, aviso, informação).
- Posições e estilos personalizáveis.
- Oferece recursos avançados como notificações baseadas em promessas.
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
Sim, o React-Toastify suporta componentes React personalizados como conteúdo de toast.
Configure `autoClose: false` nas opções do toast para que as notificações persistam.
Sim, use `toast.update(toastId, options)` com o ID do toast.
Use a propriedade `limit` no `ToastContainer` para controlar notificações simultâneas.
Sim, garanta importações e renderização do lado do cliente, especialmente com frameworks como Next.js.