Como criar alertas personalizados em React usando React-Toastify

As mensagens de alerta costumam ser usadas em aplicativos da web para exibir avisos, erros, mensagens de sucesso e outras informações valiosas.

Existem alguns pacotes e estruturas populares para criar mensagens de alerta no React. React-Toastify é uma biblioteca React que permite adicionar notificações e mensagens de alerta aos seus aplicativos.

Instalando o React Toastify

Para instalar o Toastify em seu projeto React, execute este comando no diretório do projeto:

npm install --save react-toastify

Configurando o Toastify

Para usar o pacote Toastify, você precisará importar o ToastContainer, brinde método e o arquivo CSS fornecido pelo pacote.

O ToastContainer dentro do componente App armazena todas as notificações do sistema criadas.

importar { ToastContainer, brinde } de"reagir-torrar";
importar'react-toastify/dist/ReactToastify.css';
funçãoAplicativo() {
retornar(



 </div>
 );
}

Você pode usar o brinde métodos para criar notificações toast para seu projeto React:

funçãoAplicativo() {
const notificar = () => brinde.sucesso("Olá!");
retornar(


Notificar</button>

 </div>
 );
}

Clicar no botão gerado por esse código chamará o brinde.sucesso método, passando a ele o método "Hello There!" corda. Isso criará uma notificação toast que exibe a mensagem na tela, assim:

Observe que existem diferentes tipos de métodos toast que você pode chamar, como brinde.info(), brinde.erro(), brinde.sucesso(), brinde.aviso(). Cada um desses métodos tem um estilo de cor sutil para refletir o tipo de mensagem.

Posicionando suas notificações de brinde

Por padrão, as notificações do sistema aparecem no canto superior direito da tela do aplicativo da web. Você pode alterar isso definindo a propriedade position no ToastContainer. Há seis valores de posição disponíveis: superior direito, superior central, superior esquerdo, inferior direito, inferior central e inferior esquerdo.

Por exemplo:

funçãoAplicativo() {
const notificar = () => brinde.sucesso("Olá!");
retornar(


Notificar</button>
"superior esquerdo"/>
 </div>
 );
}

Definindo o suporte de posição no ToastContainer no canto superior esquerdo garante que todas as notificações do sistema sejam exibidas no canto superior esquerdo da tela.

Você pode alterar a posição padrão para notificações individuais do sistema usando o suporte de posição do brinde métodos:

funçãoAplicativo() {
const notificar = () => brinde.sucesso("Olá!", {posição: brinde. POSITION.TOP_CENTER});
retornar(


Notificar</button>
"superior esquerdo"/>
 </div>
 );
}

Você também pode posicionar as notificações do Toast usando a propriedade de posição do CSS, mas o suporte de posição do Toastify é a maneira padrão de fazer isso.

Manipulando o prop autoClose do Toast Method e ToastContainer

Você pode alterar o tempo de exibição das notificações do sistema. Você pode controlar quanto tempo uma notificação toast permanece aberta usando o Fechar automaticamente suporte. Você pode alterar o tempo de atraso para todas as notificações do sistema e notificações do sistema individuais específicas. O Fechar automaticamente prop aceita apenas o valor booleano false ou uma duração em milissegundos.

Para alterar o tempo de atraso para todas as notificações do sistema, use o Fechar automaticamente suporte dentro do ToastContainer elemento.

Por exemplo:

funçãoAplicativo() {
const notificar = () => brinde.sucesso("Olá!");
retornar(


Notificar</button>
5000}/>
 </div>
 );
}

Com as configurações acima, todas as notificações do sistema serão exibidas por exatamente cinco segundos (5.000 milissegundos).

Usando o Fechar automaticamente propriedade de cada um brinde método, você pode personalizar o tempo de atraso para notificações individuais do sistema.

Por exemplo:

funçãoAplicativo() {
const notificarUm = () => brinde.info("Vai fechar em 10 segundos", {Fechar automaticamente: 10000});
const notificarDois = () => brinde.info("Vai fechar em 15 segundos", {Fechar automaticamente: 15000});
retornar (


Notifique um</button>
Notificar Dois</button>

 </div>
 );
}

Para evitar que a notificação toast seja fechada por padrão, você pode definir o Fechar automaticamente suporte para falso. Você pode garantir que o usuário feche manualmente cada notificação do sistema definindo o Fechar automaticamente adereço do ToastContainer para falso.

Por exemplo:

funçãoAplicativo() {
const notificar = () => brinde.info("Olá!");
retornar (


Notificar</button>
falso} />
 </div>
 );
}

Configurando o Fechar automaticamente suporte de indivíduo brinde métodos para falso também garantirá que essas notificações específicas do sistema não sejam fechadas por padrão.

Renderizando Notificações Non-String com Toastify

Você pode renderizar strings, componentes de reação e números como mensagens de notificação ao trabalhar com notificações do sistema. Para renderizar um componente React como uma notificação toast, você cria o componente e o renderiza usando um brinde método.

Por exemplo:

funçãoMensagem({toastProps, closeToast}) {
retornar (


Bem-vindo {toastProps.position}</p>
</button>
 </div>
 )
}
exportarpadrão Mensagem;

Este bloco de código cria um componente, Mensagem. Ao renderizar um componente como uma notificação, o toast adiciona toastProps e closeToast adereços ao seu componente. O closeToast prop é uma função que você pode usar para fechar a notificação. O toastProps prop é um objeto com propriedades que armazenam detalhes sobre a notificação toast, incluindo sua posição, tipo e outras características.

Importe o componente Message e passe-o para a função toast(), renderizando-o como uma notificação toast:

importar { ToastContainer, brinde } de"reagir-torrar";
importar'react-toastify/dist/ReactToastify.css';
importar Mensagem de"./components/Mensagem";
funçãoAplicativo() {
const msg = () => brinde(<Mensagem />);
retornar (


Bem-vindo</button>

 </div>
 );
}

Clicar no botão fará com que uma notificação contendo uma pergunta e dois botões sejam exibidos na tela.

Estilizando Notificações de Toast

Você não precisa usar o estilo padrão para suas notificações do sistema. Você pode personalizá-los para se ajustarem a um tema ou padrão de design desejado adequado ao seu aplicativo da web.

Para estilizar sua notificação de brinde, dê a ela um nome da classe e aplicar as personalizações dentro de um arquivo CSS.

Por exemplo:

funçãoAplicativo() {
const notificar = () => brinde.sucesso("Olá!", {nome da classe: "mensagem de brinde"});
retornar (


Notificar</button>
"centro superior" />
 </div>
 );
}

Com o nome da classe anexado à sua notificação, você pode estilizar a notificação toast de acordo com sua preferência dentro do arquivo CSS:

.toast-mensagem {
cor de fundo: #000000;
cor: #FFFFFF;
tamanho da fonte: 20px;
preenchimento: 1rem 0.5rem;
}

Como resultado do estilo personalizado acima, a notificação ficará assim:

Notificações do brinde para seu aplicativo da Web

Agora você pode criar alertas personalizados no React usando o pacote React-Toastify e seus métodos disponíveis. Ao estilizar esses alertas/notificações personalizados de acordo com sua preferência, você pode aprimorar a experiência do usuário de seu aplicativo da web.

O React-Toastify oferece um método rápido e eficaz para incluir alertas personalizados em seu projeto React sem complicações.