Como criar notificações personalizadas no React Js.

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:

Tela padrão de projetos criados através do CRA.

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:

Estrutura de pastas após as configurações iniciais do projeto.

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:

Ver código no Github ↗

Forte Abraço,

Carlos Levir