Exibindo Notificações Com React Toastify

Frequentemente, enquanto estamos desenvolvendo nossas aplicações, desejamos informar ao usuário mensagens de sucesso ou erro após alguma ação tomada.
Nativamente pelo próprio Javascript, poderíamos exibir através do window.alert, mas convenhamos, não é a maneira mais elegante a ser seguida!

Pensando nisso, existem diversas bibliotecas a qual nos ajudam nesta simples tarefa e hoje vamos falar de uma desenvolvida para React, chamada React-tostify!

React Toastify é uma biblioteca open-source desenvolvida e mantida pela comunidade Javascript!
Para instalarmos, é necessário usar o Yarn ou NPM:

1
2
3
4
5
// Usando NPM
npm install --save react-toastify

// Usando Yarn
yarn add react-toastify

Após instalarmos, precisamos importar o CSS do Toastify.
Você pode fazer isso importando em seu GlobalStyle ou diretamente em seu App.js e adicionaremos a tag do Toast!
Neste exemplo, iremos importar em app.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from "react";
import { BrowserRouter } from "react-router-dom";
import { ToastContainer } from "react-toastify"; // Importamos o Toastify

import Header from "./components/Header";
import Routes from "./routes";

import "react-toastify/dist/ReactToastify.css"; // O estilo do Toastify

function App() {
  return (
    <BrowserRouter>
      <ToastContainer autoClose={3000} />
      <Header />
      <Routes />
    </BrowserRouter>
  );
}

export default App;

Agora feito isso, podemos utilizar o notificador de alertas por toda nossa aplicação, sem nenhum problema!
Vejamos como podemos exibir então um alerta em um componente qualquer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from "react";

import { toast } from "react-toastify";

function showAlert() {
  const notify = (status) => {
    if (status === 200) {
      toast.success("Sucesso!");
    } else {
      toast.error("Erro!");
    }
  };

  return (
    <div>
      <button onClick={notify(200)}>Notify !</button>
    </div>
  );
}

Neste simples exemplo, estamos exibindo um alerta de sucesso, já que passamos o valor de status como 200.
O toastify possui além de success e error, mais algumas outras opções, sendo essas:

  • info
  • success
  • warning
  • error
  • default

Você pode consultar mais sobre a documentação através deste link

🏡