React toastify: aprenda a usar notificações no React!

Toda aplicação precisa entregar boa experiência para quem vai utilizá-la. Alguns dos itens que melhoram esse quesito são os avisos, como notificações, alertas, confirmações e feedbacks. 

Contudo, para exibir esses avisos em tela, existem bibliotecas que podem ser utilizadas e são desconhecidas pela comunidade por serem complexas ou pela ausência de tempo para manipulá-las.

Essas bibliotecas de avisos podem elevar o seu projeto a um nível muito interessante, oferecendo uma boa usabilidade. Conheceremos hoje a biblioteca react toastify, presente no ecossistema da biblioteca React.js.

Vamos lá!

O que é o React toastify e para que serve?

O React Toastify é uma biblioteca criada em JavaScript que, permite a criação de notificações de diversos tipos. Essas notificações podem ser com mensagens de sucesso, de erro, serem informativas, etc. Utilizando essa biblioteca, podemos verificar o andamento de um pagamento em uma loja virtual ou verificar se as informações enviadas para um formulário foram recebidas com sucesso, por exemplo. 

Quais as diferenças entre React toastify, React hot toast e React toast notifications?

Na tabela a seguir, serão demonstrados alguns dos pontos em comum e diferentes entre essas bibliotecas de notificações: 

React toastifyReact hot toastReact toast notifications
Possibilidade de programar por quanto tempo a notificação será exibida;Não permite programar por quanto tempo a notificação será exibida;Essa biblioteca não está mais sendo mantida atualmente. No site dela, é indicado que seja utilizada a biblioteca react-hot-toast como alternativa. 
Possibilidade de exibir um elemento do React no aviso;Não permite exibir um elemento do React no aviso;
Possibilidade de fechar um aviso com o simples ato de deslizar;Não permite fechar um aviso com o simples ato de deslizar;
Não possui a API promise(), para atualização de informações após uma busca de dados em uma API;Possui a API promise(), para atualização de informações após uma busca de dados em uma API;
Menos leve que a react-hot-toast.Biblioteca leve (com os estilos, possui capacidade menor que 5 kilobytes – KB).

Quais as vantagens e recursos de usar o React toastify?

A seguir, serão exibidos alguns dos pontos positivos ao utilizar o React toastify: 

  • Presença do modo dark para exibição de notificações;
  • Criação de uma notificação em poucos minutos;
  • Fácil personalização;
  • Com um simples ato de deslizar em seu dispositivo, o aviso já é fechado;
  • Programar por quanto tempo a notificação será exibida;
  • Ele possui uma barra de progresso no aviso, cujo podemos controlar o seu fluxo (se vai da esquerda para direita ou vice-versa);
  • Possibilidade de adição de ícones com as mensagens, nos avisos;
  • Pode funcionar em conjunto com estilos de animações (animate.css).

Quais as desvantagens e limitações do React toastify?

A principal desvantagem existente na biblioteca React toastify é o fato dela não ser tão leve como a react hot-toast. Além disso, o React toastify não possui um modo de atualizar a tela após uma conclusão de busca de dados em uma API, como funciona com o promise() no react-hot-toast.

Como instalar e usar o React toastify?

Instalando o React toastify

Antes de começar a utilizar a biblioteca React toastify, precisamos instalar a mesma em nosso projeto. Utilizando o gerenciador de pacotes NPM ou o Yarn, digitamos o seguinte comando em nosso terminal:

npm install react-toastify

ou

yarn add react-toastify

Após digitarmos um dos comandos acima em nosso terminal, apertar Enter e aguardarmos alguns minutos, a biblioteca será adicionada em nossa aplicação. 

Como criar um React toastify básico? Tutorial!

Veja os passos para criar o seu primeiro alerta utilizando o React Toastify:

1. Criação do projeto React

Para criar um projeto utilizando o React.js, devemos digitar em nosso terminal o comando:

npx create-react-app nome_aplicacao. 

O nome da aplicação pode ser qualquer um. Após digitarmos o comando acima, apertamos Enter e a instalação será realizada depois de alguns minutos.

2. Entendendo a estrutura de um projeto React.js

Após instalado, a estrutura do projeto será similar à seguinte:


Nas pastas de um projeto React, temos: 

public

Pasta em que ficará o código público de nossa aplicação. Ele pode ser uma imagem, um arquivo de estilo, um arquivo de fontes, dentre outros. Essa pasta é exclusiva para armazenar arquivos desse tipo.

src

Pasta utilizada para armazenar o código-fonte da aplicação (source). Nela, você encontrará os componentes, as páginas, como eles(as) serão renderizados(as), dentre outros.  

.gitignore

Ao executar o comando de instalação do React, será instalada, por padrão, uma pasta node_modules, que possui uma infinidade de arquivos e, ela tem um tamanho considerável para ser armazenada em servidores. Ou seja, para ignorar esses arquivos que não desejamos subir ao servidor, utilizamos o arquivo .gitignore.

LICENSE.md

Arquivo responsável pelo gerenciamento de licenças da aplicação (licença MIT).

package.json

Arquivo responsável pelo gerenciamento das dependências que a aplicação terá e as versões das mesmas. Como vimos, podemos instalar bibliotecas de ícones, de tabela, de gerenciamento de estado, etc. Quando instalamos, ao digitar o comando npm install…, a biblioteca é instalada e o arquivo package.json armazena a versão da biblioteca react-icons, por exemplo.

README.md:

Arquivo destinado para escrevemos comentários gerais sobre a aplicação, desde como executar ela em nosso equipamento, como configurar o ambiente, até como podemos adicionar melhorias, para qual finalidade o projeto foi criado, dentre outras coisas. 

Os arquivos não mencionados (.eslintcache e, package-lock.json), são arquivos de configurações gerais que, são raramente utilizados para fazer alterações neles. Você utilizará mais os arquivos ditos acima. Além disso, a pasta node_modules também não pode ser alterada, movida ou renomeada. 

3. Configurações iniciais

Na pasta src, excluiremos os arquivos: 

  • App.css;
  • App.test.js;
  • index.css;
  • logo.svg;
  • reportWebVitals.js;
  • setupTests.js;

Com a exclusão dos arquivos acima, sobrarão os arquivos App.js e index.js, que terão a estrutura a seguir: 

App.js: 

import React from 'react';
  
export default function App() {
  return (
    <div>
      Olá mundo
    </div>
  );
}

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

4. Criação de estilos globais

Na pasta src, criaremos outro fôlder com o nome “styles” e, nele, criaremos um arquivo chamado “index.js”, que conterá alguns estilos globais para nossa aplicação. 

Pasta "styles" e arquivo "index.js" na pasta "src" do projeto

Para utilizarmos os estilos, precisaremos instalar outra biblioteca em nossa aplicação, o styled-components. Para isso, vamos digitar o comando:

npm install styled-components

A biblioteca será instalada, ao apertarmos Enter.

O código de estilo global do arquivo index.js será o seguinte:

import styled, { createGlobalStyle } from 'styled-components';

export const Container = styled.div`
    display: flex;
    width: 100%;
    height: 100%;
`;

export default createGlobalStyle`
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0;
}
html,
body,
#root {
    height: 100%;
}
body {
    text-rendering: optimizeLegibility !important;
    font-family: sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #eee;
}
`;      

5. Criando as notificações

No arquivo acima, que contém os estilos globais, vamos importar os estilos da biblioteca React toastify, na primeira linha do arquivo:

import 'react-toastify/dist/ReactToastify.css';

Ficará assim:

Código após importação dos estilos da biblioteca react toastify

Depois disso, fazendo as importações necessárias dos estilos e do ToastContainer, presente no React toastify, o arquivo App.js ficará da seguinte forma: 

import React from 'react';
import { ToastContainer } from 'react-toastify';

import GlobalStyle from "./styles";

function App() {
  return (
    <>
      <GlobalStyle />
      <ToastContainer />
    </>
  );
}

export default App;

6. Criando página das notificações

Na pasta src, criamos uma pasta chamada “pages” e, nela, criamos outro diretório chamado “Notifications”:

Pastas "pages" e diretório "notifications" na pasta "src" do projeto

Na pasta Notifications, criaremos um arquivo para os estilos gerais (styles.js) e outro contendo o código JSX (index.js)

O conteúdo dos arquivos será o seguinte: 

index.js:

import React from 'react';
import { toast } from 'react-toastify';
import { Container, Buttons } from './styles';

function Notifications () {

    function handleDefault() {
        toast('Mensagem default');
    }


    function handleError() {
        toast.error('Mensagem error');
    }


    function handleSuccess() {
        toast.success('Mensagem success');
    }


    function handleInfo() {
        toast.info('Mensagem info');
    }


    function handleWarn() {
        toast.warn('Mensagem warn');
    }


    function handleCustom() {
        toast('Mensagem customizada', {
        position: toast.POSITION.TOP_LEFT,
        className: 'sua-classe',
    });
}

return (
        <Container>
            <Buttons>
            <button type="button" onClick={handleDefault}>
                Default
            </button>

            <button type="button" onClick={handleError}>
                Error
            </button>

            <button type="button" onClick={handleSuccess}>
                Success
            </button>

            <button type="button" onClick={handleWarn}>
                Warn
            </button>

            <button type="button" onClick={handleInfo}>
                Info
            </button>

            <button type="button" onClick={handleCustom}>
                Custom
            </button>
            
        </Buttons>
    </Container>
    );
}
export default Notifications;

styles.js:

import styled from 'styled-components';

export const Container = styled.div`
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
`;

export const Buttons = styled.div`
    display: flex;
    flex-wrap: wrap;
    width: 20%;
    & button {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        border-radius: 4px;
        font-weight: bold;
        font-size: 14px;
        border: 0;
        color: #fff;
        background: #009cde;
        margin-top: 5px;
        cursor: pointer;
    }
`;

Com isso, no arquivo App.js, fazemos algumas importações dos arquivos acima:

import React from 'react';
import { ToastContainer } from 'react-toastify';
import Notifications from './pages/Notifications';
import GlobalStyle from './styles';

function App() {
return (
    <>
      <GlobalStyle />
      <ToastContainer />
      <Notifications />
    </>
  );
}

export default App;

As notificações estarão criadas e, o resultado será o seguinte:

Como criar o seu próprio React toastify?

Essa biblioteca permite que seja criado seu próprio alerta customizado conforme a necessidade. Para isso, em nosso projeto, no folder src, criamos uma pasta components e um diretório chamado MyToast com o arquivo index.js nele:

Pasta "components" e diretório "myToast" contendo o arquivo "index.js" na pasta "src" do projeto

index.js, da pasta MyToast:

  import React from 'react';
import styled from 'styled-components';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const MyToast = styled(ToastContainer)`
.Toastify__toast--info {
    background: 'rgb(51, 102, 255)';
}
.Toastify__toast--success {
    background: 'rgb(51, 187, 102)';
}
.Toastify__toast--warning {
    background: 'rgb(254, 255, 20)';
}
.Toastify__toast--error {
    background: 'rgb(255, 102, 102)';
}
`;
export const showToast = ({ type, message }) => {
    switch (type) {
        case 'success':
            toast.success(message);
            break;
        case 'warn':
            toast.warn(message);
            break;
        case 'error':
            toast.error(message);
            break;
        default:
            toast.info(message);
    }
};
export default function ToastAnimated() {
    return <MyToast />;
}

As cores utilizadas no código acima sobrescrevem as cores padronizadas da biblioteca, utilizando as que desejamos. Assim, a função showToast(), passamos alguns parâmetros nela para exibição em tela, tais como o tipo do toast (sucesso, erro, aviso, etc) e, a mensagem em texto que será exibida. 

Para utilizar nosso toast recém-criado, no arquivo App.js, faremos o seguinte:

Exemplo de parâmetros de exibição em tela no react toastify

Dessa forma, o resultado será:

O código final do App.js após as importações é o seguinte:

import React from "react";
import ToastAnimated, { showToast } from "./components/MyToast";


export default function App() {
    const handleClick = () =>
        showToast({ type: "success", message: "Mensagem de sucesso" });

    return (
    <>
        <ToastAnimated />
        <button onClick={handleClick}>Exibir alerta</button>
    </>
    );
}

6 exemplos de uso do React toastify na prática!

1. Notificação ao centro da tela

Na função handleSuccess(), passamos uma mensagem desejada para ser exibida na notificação. Definimos alguns pontos nela, como os abaixo, sendo:

  • position: posição da notificação. No caso, queremos que ela fique no topo central;
  • autoClose: o tempo desejado, em milissegundos, para a notificação ser fechada;
  • hideProgressBar: se a barra de progresso do toast deve ser escondida ou não;
  • closeOnClick: se, ao clicarmos no alerta, ele deve ser fechado ou não;
  • pauseOnHover: se, ao passarmos o mouse no alerta, ele deve ser parado ou não;
  • draggable: se esse evento é do tipo “arraste e solte”;
  • progress: define o progresso do toast.
Função handleSuccess do react toastify

Invocamos a função handleSuccess no botão a seguir, pela função onClick:

Função onClick do react toastify

E, chamamos a página Notifications, no componente principal (App.js):

Chamamento da página Notifications no componente principal do react toastify

O resultado apresentado será:

2. Notificação à direita da tela, com modo escuro

Para esse exemplo, utilizaremos um toast do tipo warning, ou aviso, em Português. Para deixarmos ele à direita da tela, alteramos a posição para “top-right”, em position e, adicionamos um tema “dark”, em theme:

Função theme do react toastify

O resultado será o seguinte:

3. Notificação à esquerda da tela, sem barra de progresso

Para esse exemplo, utilizaremos um toast do tipo error. Para deixarmos ele à esquerda da tela, alteramos a posição para “bottom-left”, em position e, adicionamos a propriedade “true”, para esconder a barra de progresso:

Funções position e hideProgressBar do react toastify

O resultado será o seguinte:

4. Notificação ao centro da tela, com transição

Para esse exemplo, utilizaremos um toast do tipo info e, vamos adicionar uma transição ao nosso toast. Para isso, adicionamos a propriedade “transition”, e inserimos a propriedade Flip (giro, em Português), após a sua importação do react-toastify:

Função transition do react toastify

Nosso toast ficará com uma transição de giro, após ser fechado:

5. Notificação à direita da tela, com carregamento

Para esse exemplo, utilizaremos um toast do tipo info. Para deixarmos ele à direita da tela, alteramos a posição para “top-right”, em position e, adicionamos a propriedade “true”, na propriedade isLoading:

Função isLoading do react toastify

O resultado será a exibição de um ícone de carregamento no toast:

Ele pode ser muito útil enquanto estamos esperando uma resposta da API, de um serviço, de um pagamento, etc. 

6. Notificação à esquerda da tela, com ou sem ícones

Podemos deixar nossa notificação com ou sem ícones, através da propriedade icon. Para deixar com ícones, deixamos ela como true. Para deixar sem eles, ela ficará com o valor false:

Função icon setada em false no react toastify
Notificação sem ícones
Função icon setada em true no react toastify
Notificação com ícones

Conclusão

O React Toastify é uma excelente estrutura para auxiliar na exibição de notificações. Sua estrutura é customizável e permite que sejam incorporadas vários estilos e propriedades nele, para ter um visual mais interessante. Também podem ser inseridos ícones e cores, além das mensagens de sucesso, erro, etc. 

Esse componente está presente no gerenciador de pacotes NPM e pode ser utilizado em qualquer projeto da biblioteca React.js. Além desse componente, existem muitas outras estruturas apresentadas no artigo que permitem a criação de notificações de forma simples no React.js, como o react-hot-toast. No caso, você observou o quão simples é a criação, a estrutura e a configuração desse componente em uma aplicação. 

Para aprofundar os seus conhecimentos em React.js, confira como utilizar o Yup, no React.js para validação de formulários.