React Toastify

Instalação

$ yarn add react-toastify

O uso prático

Arquivo src/App.js

Importação do ToastContainer

import { ToastContainer } from 'react-toastify';

Chamada do componente para sumir automaticamente em 3 segundos (em qualquer lugar dentro das rotas)

<ToastContainer autoClose={3000} />

Modelo de exemplo da função ao todo

import store from './store';

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

export default App;

Arquivo src/styles/global.js

Importação dos estilos do Toast nos estilos globais

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

Arquivo src/store/modules/cart/sagas.js

Importação do módulo

import { toast } from 'react-toastify';

Uso do Toast em uma situação de erro

if (amount > stockAmount) {
  toast.error('Quantidade solicitada indisponível no estoque.');

  return;
}

Customização

Configura a aparência do seu tost no site https://fkhadra.github.io/react-toastify/