Introdução
Você pode descobrir que há momentos em que deseja enviar notificações aos seus usuários com base no estado de sua interação ou alguma outra variável. É aqui que as notificações do sistema são úteis.
Embora seja possível criar um componente toast personalizado para React , você pode descobrir que uma biblioteca disponível gratuitamente atende às suas necessidades de desenvolvimento. Continue lendo para comparar quatro das principais bibliotecas do React toast.
react-hot-toast
Os criadores de react-hot-toast o descrevem como “a melhor torrada da cidade”. Uma coisa que adoro particularmente nesta biblioteca é o seu design: tem uma das torradas mais bem concebidas que já vi.
Uso
Por meio da API toast , temos acesso ao método success . O componente Toaster é responsável por renderizar todos os toasts. Isso é tudo o que é necessário para configurar uma torrada básica com torrada reativa quente:
import toast, {Toaster} de"react-hot-toast";
const successToast=()=> toast.success ("Este é um brinde com sucesso."); função padrão de exportação App () { Retorna (
Variantes de torradas
react-hot-toast fornece quatro variantes de toast: sucesso , erro , carregando e promessa .
toast.success (); toast.error (); toast.loading (); toast.promise ();
A notificação de notificação promessa é útil quando você deseja atualizar uma notificação após algum evento, digamos, depois que a busca de dados de uma API foi concluída.
import toast, {Toaster} de"react-hot-toast"; const simulateFetch=()=> { toast.promise (fetchData (), { carregando:"Buscando dados", sucesso:"Dados obtidos com sucesso", erro:"Erro ao buscar", });
}; função padrão de exportação App () { Retorna (
Pode haver casos em que você deseja criar um brinde personalizado para atender às necessidades do seu projeto. react-hot-toast é certamente personalizável o suficiente, então você pode fazer isso. Aqui, passamos uma função para toast que retorna o toast personalizado:
const customToast=()=> brinde ((t)=> ( Eu sou um brinde personalizado )); função padrão de exportação App () { Retorna (); }
Configuração
O segundo argumento da API toast é um objeto options , com o qual você pode configurar o comportamento de cada toast. Podemos indicar a duração do brinde, alterar seu estilo, definir ícones personalizados, definir suas propriedades de acessibilidade e alterar o tema de seu ícone.
importar {AiFillAndroid} de"react-icons/ai"; toast.error ("erro toast", { duração: 7.000, //configuração do ícone iconTheme: { primário:"branco", secundário:"preto", }, //configuração ARIA papel:"status", ariaLive:"educado", //toast styles estilo: { fundo:"vermelho", cor:"whitesmoke", ícone:
Recursos
Existem várias maneiras de dispensar brindes com React Hot Toasts. Você pode dispensar um único brinde. Se você não passar uma referência de brinde ao método dispensar , ele dispensará todos os brindes de uma vez.
const successToast=toast.success ('Este é um brinde de sucesso');
toast.dismiss (successToast); toast.dismiss ()//isso irá descartar todos os brindes de uma vez
Experiência do desenvolvedor
Além de ter torradas bem projetadas, o react-hot-toast tem uma documentação bem estruturada. Também adoro como é fácil adicionar ícones personalizados a cada brinde. Esta é uma biblioteca que vale a pena conferir.
Notyf
Notyf é uma biblioteca JavaScript leve e fácil de usar para criar notificações do sistema. É compatível com React, Vue e Angular.
Uso
Criamos uma nova instância da classe Notyf e a usamos para configurar nosso brinde. Aqui, acessamos o método success da instância. Este método usa uma string contendo a mensagem do sistema como seu único argumento. Anexamos a função successToast ao evento onClick de um botão, e isso é tudo o que é necessário para configurar um toast básico usando Notyf.
import"./styles.css";
importar {Notyf} de"notyf";
importar"notyf/notyf.min.css"; const notyf=new Notyf ();
const successToast=()=> notyf.success ("Este é um brinde de sucesso"); função padrão de exportação App () { Retorna ( );
}
Variantes de torradas
Ao contrário das outras bibliotecas neste artigo, Notyf vem com apenas dois tipos de brinde prontos para uso: um brinde com sucesso e um brinde com erro. Seria incrível se a biblioteca fornecesse variantes adicionais de toast embutidas.
notyf.success ("brinde com sucesso");
notyf.error ("erro de notificação");
Configuração
A instância Notyf pode tomar como argumento um objeto opcional, no qual definimos o comportamento do brinde. Aqui, definimos a duração do brinde, a posição em que queremos que apareça e se queremos que o usuário seja capaz de dispensar o brinde.
const notyf=new Notyf ({ duração: 1000, dispensávelea: verdadeiro, posição: { x:"certo", y:"top", },
}
Recursos
Você pode dispensar um brinde específico. Quando o método dispensar é chamado, successToast será dispensado mesmo que sua duração não tenha decorrido. Você também pode dispensar todos os brindes que estão presentes com o método CC0All .
const successToast=()=> notyf.success ("Este é um brinde de sucesso");
notyf.dismiss (successToast); notyf.dismissAll ();//dispensar todos os brindes abertos
Embora Notyf venha com apenas os brindes success e error prontos para uso, você pode criar seus próprios brindes personalizados. Definimos e estilizamos qualquer brinde personalizado na matriz tipos .
No snippet a seguir, configuramos um brinde de carregamento personalizado que será útil ao buscar dados ou enviar um formulário. Para usar brindes personalizados, usamos o método open e passamos a ele um objeto contendo o nome do brinde personalizado e sua mensagem.
//define o sistema de carregamento personalizado
const notyf=new Notyf ({ tipos: [ { tipo:"carregando", fundo:"preto", duração: 2000, dispensável: verdadeiro, }, //outros brindes personalizados, se houver ],
}); //chamar o brinde de carregamento
const showCustomToast=()=> { notyf.open ({ tipo:"carregando", mensagem:"Buscando dados...", });
};
Experiência do desenvolvedor
A experiência do desenvolvedor seria melhor se a biblioteca cobrisse um brinde de carregamento que é atualizado quando um evento assíncrono é concluído. Além disso, Notyf é uma biblioteca de ferramentas simples de usar. Embora Notyf não seja empacotado com tantos recursos quanto as outras bibliotecas do React toast neste artigo, ele ainda cobre os casos de uso mais comuns.
Reagir notificações do sistema
React Toast Notifications é um sistema de notificação do sistema configurável e combinável para reagir.
Uso
Para usar o React Toast Notifications, envolva seu aplicativo no ToastProvider , que fornece contexto para os descendentes do Toast .
import React from"react";
importar ReactDOM de"react-dom";
importar aplicativo de"./App";
importar {ToastProvider} de"react-toast-notificações"; ReactDOM.render ( , document.getElementById ("root")
);
Por meio do gancho useToast , temos acesso ao método addToast . Seu primeiro argumento é uma string contendo a mensagem do sistema e o segundo é um objeto de configuração. No objeto de configuração, definimos a aparência da notificação como sucesso e autoDismiss como true .
import {useToasts} de"react-toast-notifications"; função padrão de exportação App () { const {addToast}=useToasts (); const successToast=()=> { addToast ("Este é um brinde de sucesso", { aparência:"sucesso", autoDismiss: true, }); }; Retorna ( );
}
Variantes de torradas
Quatro notificações do sistema estão disponíveis no React Toast Notifications: sucesso , erro , aviso e info .
addToast ("brinde com sucesso", {aparência:"sucesso"});
addToast ("erro brinde", {aparência:"erro"});
addToast ("aviso brinde", {aparência:"aviso"});
addToast ("info toast", {aparência:"info"});
Configuração
Podemos configurar toasts no React Toast Notifications passando adereços para o ToastProvider .
Ao configurar com o ToastProvider , a colocação , transiçãoDuração , autoDismiss e autoDismissTimeout são passados como suportes e, em seguida, herdados pelo componente toast descendente.
Recursos
Temos acesso aos seguintes métodos do gancho useToast :
const {addToast, removeToast, removeAllToasts, updateToast}=useToast ()
Já sabemos como funciona o método addToast . Podemos remover um brinde específico com removeToast e remover todos os brindes abertos com removeAllToasts . O método updateToast pode ser útil quando queremos atualizar um toast após a conclusão de uma operação, digamos, após alguns dados terem sido buscados.
Experiência do desenvolvedor
Embora a API do React Toast Notifications seja direta, não é a mais simples de trabalhar. No que diz respeito aos documentos, há espaço para melhorias, principalmente em mostrar como um ID de usuário pode ser passado para uma notificação e como uma notificação pode ser removida e atualizada. No geral, o React Toast Notifications carece de uma documentação ampla e clara.
React-Toastify
React – Toastify é uma biblioteca de notificação do React altamente personalizável que nos permite adicionar notificações aos nossos aplicativos com facilidade.
Uso
O React-Toastify tem uma API semelhante ao react-hot-toast. Por meio da API toast , podemos acessar as diferentes variantes de toast. O componente ToastContainer é necessário para que os toasts apareçam.
import {ToastContainer, toast} de"react-toastify";
import"react-toastify/dist/ReactToastify.css"; função padrão de exportação App () { const successToast=()=> toast.success ("Este é um brinde de sucesso!"); Retorna (
Variantes de torradas
O React-Toastify tem a maioria das variantes de qualquer biblioteca neste artigo. Ele fornece seis variantes de notificação: sucesso , erro , aviso , info , dark e uma variante padrão.
toast.success ("brinde com sucesso")
toast.error ("erorr toast")
toast.warn ("aviso brinde")
toast.info ("info toast")
toast.dark ("toast modo escuro")
toast ("torrada padrão")
Configuração
Podemos passar um objeto options para toast como um segundo argumento. Aqui, podemos definir o comportamento da torrada.
toast.dark ("Este é um brinde do sucesso!", { posição: toast.POSITION.BOTTOM_RIGHT, autoClose: 2000, pauseOnHover: verdadeiro, arrastável: verdadeiro,
});
Podemos substituir a animação do sistema padrão pelo método cssTransition . Ele aceita um objeto no qual definimos as animações enter e exit para o brinde.
import"animate.css/animate.min.css";
import {ToastContainer, toast, cssTransition} de"react-toastify"; const bounce=cssTransition ({ digite:"animate__animated animate__bounceIn", exit:"animate__animated animate__bounceOut",
}); const customAnimationToast=()=> { toast.dark ("Ei & # x1f44b ;, veja como é fácil!", { transição: salto, });
}; função padrão de exportação App () { Retorna ( );
}
Recursos
Podemos atualizar toasts programaticamente no React-Toastify. Ao contrário do react-hot-toast, no entanto, onde podemos armazenar uma referência a um toast em uma variável, temos que usar o gancho useRef para rastrear o toast que queremos atualizar.
import {useRef} de"react"; função padrão de exportação App () { deixe toastId=useRef (null); const successToast=()=> { toastId=toast ("Buscando dados...", {autoClose: false}); }; const updateToast=()=> { toast.update (toastId, {type: toast.TYPE.INFO, autoClose: 5000}); } Retorna ( );
}
Experiência do desenvolvedor
O React-Toastify tem mais variantes do toast do que qualquer outra biblioteca acima e tem muitos recursos incríveis. Quanto à API, é bastante semelhante às APIs react-hot-toast e React Toast Notifications.
Conclusão
Depois de comparar essas quatro bibliotecas de brinde React e aprender como usá-las em nossos aplicativos, é hora de compartilhar uma opinião sobre o melhor do grupo. Eu gosto de usar reage-quente-torrada acima do resto. Além de brindes bem projetados e API simples, ele vem com um brinde promessa que facilita a atualização assíncrona dos brindes.
A postagem Top React toast library comparada apareceu primeiro em LogRocket Blog .
