A exibição de notificações é algo muito importante para que os usuários possam ter um feedback de uso da sua aplicação.
Hoje, vamos aprender como exibir notificações personalizadas, através da biblioteca react-toastify.
Passo #1: Criação do projeto
Para começamos, criaremos um projeto através do Create React App.
Você pode criar seu projeto através do comando abaixo:
create-react-app app
Com o processo finalizado, você pode entrar na pasta app que você criou e rodar o comando:
yarn start
Após alguns segundos, uma nova janela no seu navegador se abrirá, semelhante a essa:

Passo #2: Instalação das bibliotecas
Agora, instalaremos as bibliotecas que usaremos no nosso projeto.
Para isso, dentro da pasta do seu projeto, rode o comando abaixo:
yarn add react-toastify styled-components
O react-toastify é a biblioteca que utilizaremos para exibir as notificações personalizadas.
O styled-components é a biblioteca que vai nos ajudar a estilizar nossa aplicação.
Passo #3: Configurações gerais
Em todos os projetos que eu crio utilizando Create React App, eu sempre gosto de fazer algumas configurações para deixar o projeto mais organizado.
Começaremos apagando alguns arquivos na pasta src, são eles:
- App.css
- App.test.js
- index.css
- logo.svg
- serviceWorker.js
Apague também o arquivo manifest.json, que está na pasta public.
Precisamos também remover a importação desses arquivos.
O seu index.js deve ficar da seguinte forma:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
E o seu arquivo App.js, deve ficar da seguinte forma:
import React from 'react';
function App() {
return <div />;
}
export default App;
Para finalizar a parte de configuração, criaremos um arquivo de estilos globais para nossa aplicação.
Para isso, crie uma pasta chamada styles, dentro da pasta src, e nela, crie um arquivo index.js.
Adicione a esse arquivo o seguinte código:
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;
}
`;
Essas configurações nos ajudarão a trabalhar melhor com tamanhos nos nossos componentes.
Nesse momento, sua estrutura deve estar semelhante a essa:

Passo #4: Configuração das notificações
Agora, faremos a configuração para que o react-toastify funcione corretamente.
Por padrão, o react-toastify não vem com estilos configurados, mas ele nos oferece um arquivo de estilos para utilizarmos.
No arquivo index.js da pasta styles, adicione a seguinte linha de código, logo antes do import do styled-components:
import 'react-toastify/dist/ReactToastify.css';
Agora, no arquivo App.js, adicionaremos os estilos que criamos no passo #3, e, o ToastContainer do react-toastify.
Seu App.js deve 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;
Passo #5: Criação da página de exemplo
Para esse tutorial, criaremos uma página de exemplo para testarmos a exibição das notificações.
Para isso, crie uma pasta pages na pasta src.
Dentro da pasta pages, crie uma pasta Main e nela, crie um arquivo index.js.
Adicione ao arquivo index.js da pasta Main, o seguinte conteúdo:
import React from 'react';
import { toast } from 'react-toastify';
import { Container, Buttons } from './styles';
function Main() {
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 Main;
Nesse arquivo, nós criamos alguns botões e funções para exibição das notificações.
O react-toastify nos oferece alguns tipos de notificações que podemos utilizar, são eles:
- Default, container branco com um time colorido.
- Error, container vermelho.
- Success, container verde.
- Warn, container amarelo.
- Info, container azul.
Você também pode criar seu próprio estilo de notificações, alterando a posição do objeto ou passando uma classe diferente para editar o estilo das notificações, como foi mostrado na função handleCustom.
Agora, criaremos alguns estilos para nossa página, para isso, ainda na pasta Main, crie um arquivo styles.js, com o seguinte código:
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;
}
`;
Nesse arquivo, nós apenas criamos alguns estilos para os botões da nossa página de exemplo.
Passo #6: Finalizando a aplicação
Para finalizarmos a aplicação, precisamos importar a página de exemplo que criamos.
Para isso, deixe seu App.js da seguinte maneira:
import React from 'react';
import { ToastContainer } from 'react-toastify';
import Main from './pages/Main';
import GlobalStyle from './styles';
function App() {
return (
<>
<GlobalStyle />
<ToastContainer />
<Main />
</>
);
}
export default App;
O GlobalStyle contém os estilos que criamos no passo #3.
Ao finalizar sua aplicação, sua estrutura deve estar semelhante à essa:

Demonstração
Confira como ficou o resultado final:

Forte Abraço,
Carlos Levir