Criando notificações envolventes com o Toastr no React

As notificações são essenciais para qualquer aplicativo da Web, pois fornecem informações importantes aos usuários. Em vez de criar o sistema de notificação do zero, você pode usar bibliotecas externas. Toastr é uma das bibliotecas populares para criar notificações em aplicativos JavaScript.

Instalando a Biblioteca Toastr

Primeiro, comece criando um aplicativo React com o qual você trabalhará. Você pode crie um aplicativo React usando o Vite.

Depois de criar o aplicativo, instale o torrar package em seu projeto executando o seguinte comando em seu terminal:

npm install --save toastr

Agora você instalou o torrar pacote e pode usá-lo para exibir notificações.

Criando notificações usando o Toastr

Para criar as notificações, você usará o torrar função. O torrar A função é usada para criar e exibir mensagens do sistema. Antes de criar suas notificações, certifique-se de importar seu torrar estilos de notificações em seu arquivo CSS.

@import'toastr';

Aqui está um exemplo de como você cria uma notificação usando o torrar função:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Neste exemplo, você define um notificar função. O Clique em mim botão chama o notificar função quando você clica nele. O notificar função usa o toastr.sucesso função para exibir uma notificação de sucesso.

O toastr.sucesso função recebe dois argumentos. O primeiro argumento é a mensagem de notificação que, neste caso, é a string "É bom ter você aqui". O segundo argumento é o título da notificação, "Bem-vindo".

Uma notificação semelhante à imagem a seguir aparecerá quando você clicar no botão Clique em mim botão.

Em adição a toastr.sucesso função, o torrar O objeto fornece outras funções para criar notificações. As outras funções são as toastr.error, toastr.warning, e toastr.info. Cada função cria uma notificação com uma cor de fundo e um ícone diferentes, para que você possa distinguir facilmente entre diferentes tipos de notificações.

Por exemplo, quando você usa o toastr.error função, sua notificação ficará assim:

Personalizando suas notificações

Com a biblioteca Toastr, você não pode personalizar suas notificações usando CSS tradicional, ao contrário ao trabalhar com React-Toastify. No entanto, o Toastr ainda oferece outras opções para personalizar notificações. Você pode usar essas opções para personalizar a posição, a aparência e a funcionalidade de suas notificações. Você precisa passar as opções para o terceiro argumento do torrar método.

Aqui está um exemplo:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 closeButton: true,
 progressBar: true,
 timeOut: 3000,
 positionClass: "toast-top-center",
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Para personalizar a notificação, esse código usa o botão fechar, Barra de progresso, tempo esgotado, posiçãoClasse, showMethod, e esconderMétodo propriedades do objeto de opções. O botão fechar A propriedade determina se sua notificação será exibida com um botão Fechar. Aceita um valor booleano.

Usando o Barra de progresso propriedade, você pode adicionar uma barra de progresso à notificação. Configurando o tempo esgotado A propriedade permite que você controle por quanto tempo uma notificação será exibida. Esta propriedade especifica o número de milissegundos antes que a notificação desapareça automaticamente.

O posiçãoClasse A propriedade define a posição da notificação em sua tela. Aceita oito valores pré-definidos. Os valores incluem:

• brinde-canto superior direito: Exibe a notificação no canto superior direito da tela.
• brinde-canto-esquerdo: A notificação será exibida no canto superior esquerdo da tela.
• brinde-topo-centro: a notificação aparecerá na parte superior central da tela.
• brinde-inferior-direita: Você verá a notificação no canto inferior direito da tela.
• brinde-inferior-esquerdo: a notificação é colocada no canto inferior esquerdo da tela.
• brinde-inferior-centro: Você encontrará a notificação na parte inferior central da tela.
• torrada-topo-largura total: a notificação aparece na parte superior da tela, preenchendo toda a largura da tela.
• largura total do fundo do brinde: a notificação preenche toda a largura da tela e é exibida na parte inferior.

Por último, o showMethod e esconderMétodo As propriedades controlam as animações para exibir e ocultar a notificação. O showMethod propriedade especifica a animação usada para exibir uma notificação, enquanto a propriedade esconderMétodo A propriedade especifica a animação usada para ocultar uma notificação.

A notificação definida no bloco de código acima aparecerá na parte superior central da tela, com uma barra de progresso e um botão Fechar. Ele desaparecerá após três segundos e usará as transições fade-in e fade-out para aparecer e desaparecer.

Vai parecer algo assim.

Observe que você pode personalizar todas as notificações do Toastr com um único objeto de opções em vez de personalizá-las uma de cada vez. Para fazer isso, você usará o toastr.options propriedade. Este objeto de propriedade contém as propriedades de personalização de todas as suas notificações do Toastr.

Por exemplo:

import React from"react";
import toastr from"toastr";
functionApp() {
 toastr.options = {
 closeButton: true,
 progressBar: true,
 positionClass: "toast-top-right",
 timeOut: 5000,
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 };
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
const displayError = () => {
 toastr.error("You ran into an error", "Sorry");
 };
return (



Click Me</button>
Error</button>
 </div>
 );
}
exportdefault App;

Este exemplo mostra como configurar todas as notificações para ter uma barra de progresso, um botão Fechar, uma exibição no canto superior direito canto da tela, feche automaticamente após 5 segundos e use as transições fade-in e fade-out para aparecer e desaparecer.

Executar o aplicativo e clicar nos botões renderizará uma interface semelhante à imagem abaixo.

Torne suas notificações interativas

Você pode tornar suas notificações mais atraentes adicionando interatividade, como a capacidade de clicar nelas. Para fazer isso, você usa o ao clicar propriedade. O ao clicar A propriedade é uma das opções de personalização fornecidas pela biblioteca Toastr. Ele especifica uma função que é executada quando você clica na notificação, semelhante ao click event (um dos ouvintes de eventos do JavaScript).

Aqui está um exemplo de como usar o ao clicar propriedade:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 onclick: () => {
 toastr.clear();
 },
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

No bloco de código acima, o objeto de opções do toastr.sucesso função contém um ao clicar propriedade. O ao clicar propriedade chama o toastr.clear função, que limpa a notificação da tela.

Crie notificações envolventes usando o Toastr

Aqui, você aprendeu a usar a biblioteca Toastr para criar notificações envolventes para seu aplicativo React. Você instalou o Toastr, configurou-o em seu aplicativo e criou e personalizou suas notificações. Toastr é uma biblioteca poderosa que pode ajudá-lo a criar notificações informativas e visualmente atraentes. Além do Toastr, você também pode experimentar outras bibliotecas como SweetAlert, React-Toastify ou Chakra UI.