Criando notificações envolventes com o Toastr no React

A utilização de bibliotecas externas é uma abordagem prática para a construção de um sistema de notificação para aplicações web, pois permite que os usuários recebam informações cruciais por meio dessas notificações. Entre as opções disponíveis, Toastr é uma biblioteca amplamente utilizada para implementar notificações em aplicativos baseados em JavaScript.

Instalando a Biblioteca Toastr

Recomenda-se criar um aplicativo React utilizando o Vite como servidor de desenvolvimento para começar a trabalhar.

 npm install --save toastr

A instalação do pacote toastr foi concluída, possibilitando a utilização desta ferramenta para exibição de avisos

Criando notificações usando o Toastr

A utilização da função toastr é imprescindível para a criação e exibição de mensagens toast. Antes de gerar as notificações, é necessário importar o estilo desejado de notificações toastr dentro do arquivo CSS relevante.

 @import 'toastr';

import React from "react";
import toastr from "toastr";

function App() {
  const notify = () => {
    toastr.success("It is nice to have you here", "Welcome");
  };

  return (
    <div>
      <button onClick={notify}>Click Me</button>
    </div>
  );
}

export default App;

A presente instância envolve a formulação de uma função de notificação, que é convocada pelo botão Click Me ao ser clicado. A função execute emprega o componente toastr.success para produzir uma notificação com um resultado positivo.

A função toastr.success() requer dois parâmetros. A mensagem inicial, que é uma string, transmitindo a informação de que “É um prazer ter você presente”, serve como o conteúdo principal da notificação. O título da notificação, identificado como “Bem-vindo”, fornece um título de acompanhamento para a mensagem.

Uma mensagem semelhante à imagem representada será exibida ao clicar no botão “Clique em mim”.

A biblioteca toastr oferece várias funções além da bem-sucedida, incluindo erros, avisos e variedades de informações, cada uma apresentando cores de fundo e ícones distintos para distingui-los uns dos outros.

A utilização do

Personalizando suas notificações

A utilização da biblioteca Toastr não permite a customização de notificações por meio de CSS convencional, ao contrário de quando se trabalha com React-Toastify. No entanto, o Toastr ainda oferece métodos alternativos para personalizar as preferências de notificação. Essas alternativas podem ser empregadas para ajustar a localização, aparência e funcionalidades das notificações, passando as opções relevantes para o terceiro parâmetro do

Aqui está um exemplo:

 import React from "react";
import toastr from "toastr";

function App() {
  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 (
    <div>
      <button onClick={notify}>Click Me</button>
    </div>
  );
}

export default App;

O código acima mencionado utiliza várias propriedades de um objeto de opções para personalizar a notificação, incluindo closeButton, progressBar, timeout, positionClass, showMethod e hideMethod. Estas propriedades permitem definir vários atributos para a notificação, como a presença de um botão fechar, a inclusão de uma barra de progresso, a duração da visibilidade da notificação, a classe aplicada à sua posição exibida, o método usado para mostrar ou ocultar a notificação, entre outros.

A utilização do atributo progressBar permite a implementação de uma barra de progresso dentro de uma notificação. A designação da propriedade timeout permite regular a duração pela qual o aviso permanece visível. Esta propriedade determina a quantidade de tempo em milissegundos antes do desaparecimento automático da notificação.

A propriedade “positionClass” refere-se ao local na tela onde uma notificação aparece e é composta por oito valores predeterminados. Esses valores são os seguintes:

As notificações do Toast são exibidas com destaque no canto superior direito da tela, servindo como um lembrete para atualizações ou alertas importantes.

A notificação deve ser exibida na região superior do lado esquerdo da tela do usuário.

O alerta será exibido no ápice do seu display, ocupando a posição central.

No canto inferior direito de sua tela, você deve observar o alerta.

O canto inferior esquerdo da tela serve como local para a notificação, que pode ser identificada pela designação “toast-bottom-left.

A notificação pode ser encontrada na parte inferior central da tela de exibição.

A presente anotação refere-se a um tópico que está sendo exibido na tela de um dispositivo de forma expandida, ocupando toda a largura da tela.

O presente aviso ocupa toda a largura do display e aparece na base do mesmo, com sua largura estendendo-se de uma extremidade à outra da tela.

As propriedades showMethod e hideMethod controlam as animações associadas à exibição e ocultação do aviso. A propriedade showMethod determina a animação utilizada ao revelar um aviso, enquanto a propriedade hideMethod determina a animação utilizada ao ocultar um aviso.

O referido aviso será exibido no centro da região superior da tela, acompanhado de uma barra de progresso e um botão de dispensa. A referida notificação deixará de existir após uma duração de três segundos, e utilizará efeitos de fade-in e fade-out para seu aparecimento e desaparecimento.

Vai parecer algo assim.

A utilização da propriedade toastr.options permite a modificação simultânea de várias configurações de notificações do Toast, ao invés de ajustar individualmente cada respectivo aviso. Ao empregar esta propriedade, pode-se alterar a aparência e a disposição de todos os alertas em conjunto, manipulando o objeto toastr.options, que abrange as personalizações de cada notificação do Toast dentro do aplicativo.

Por exemplo:

 import React from "react";
import toastr from "toastr";

function App() {
  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 (
    <div>
      <button onClick={notify}>Click Me</button>
      <button onClick={displayError}>Error</button>
    </div>
  );
}

export default App;

A presente instância ilustra o procedimento para configurar cada notificação para exibir uma barra de progresso, um botão Fechar, um posicionamento no canto superior direito da tela, fechamento automático após cinco segundos de duração e utilização de fade-in e fade-efeitos para aparecer e desaparecer.

A atuação do aplicativo e a manipulação dos controles devem resultar na exibição de uma interface gráfica do usuário, que deve se assemelhar à representação retratada.

Faça suas notificações interativas

Ao utilizar o atributo “onclick”, os usuários podem aprimorar a experiência geral de suas notificações, permitindo elementos interativos, como a capacidade de clicar e acionar ações ou funções específicas. Essa funcionalidade é possível por meio da incorporação da propriedade “onclick”, que é um recurso fornecido pela biblioteca Toastr que permite a especificação de uma função a ser executada ao clicar na notificação, fazendo um paralelo com o comportamento do “evento click” no JavaScript.

A seguir, uma demonstração da utilização do atributo “onclick”:

 import React from "react";
import toastr from "toastr";

function App() {
  const notify = () => {
    toastr.success("It is nice to have you here", "Welcome", {
      onclick: () => {
        toastr.clear();
      },
    });
  };

  return (
    <div>
      <button onClick={notify}>Click Me</button>
    </div>
  );
}

export default App;

O bloco de código acima mencionado mostra uma instância da biblioteca toastr.js sendo utilizada em JavaScript. Especificamente, ele destaca a implementação do método toastr.success, que é chamado para exibir uma mensagem de sucesso para o usuário na interface do aplicativo. Esta mensagem é apresentada dentro de uma caixa de diálogo modal com o título “Sucesso”. Além disso, o parâmetro options passado como um argumento para toastr.success define certos recursos personalizáveis ​​para este evento de notificação específico, como sua posição e duração da animação. Além disso, deve-se chamar a atenção para a presença de uma propriedade onclick dentro do objeto options, que serve para chamar a função toastr.clear quando clicado. Esta função limpa efetivamente remove a notificação exibida da tela do usuário.

Crie notificações envolventes usando o Toastr

A passagem anterior foi refinada da seguinte forma: Nesta seção, você foi apresentado à utilização da biblioteca Toastr em um aplicativo React para construir notificações que chamam a atenção. Foi realizada a instalação e configuração do Toastr, seguida da criação e personalização das notificações. Toastr é uma biblioteca excepcionalmente capaz que permite o desenvolvimento de avisos que são instrutivos e visualmente impressionantes. Vale a pena considerar bibliotecas alternativas, como SweetAlert, React-Toastify ou Chakra UI, se desejado.