📣 Tailwind Master Kit: 100+ Professional, ready to embed  Tailwind Components

Toast

A simple reusable notification toasts

import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <ToastContainer />
      <Component {...pageProps} />
    </>
  );
}
const logout = async () => {
  await firebase.auth().signOut();
  dispatch({
    type: "LOGOUT",
  });
  toast.success("🚀 Logged out successfully!");
  router.push("/login");
};

Usage

1

Install react-toastify npm package

npm i react-toastify
2

Import in the root directory

Import two helper functions in the root directory
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

This import gives access to the toast object where all the methods live. Since it is in the root directory, it is accessible over all the pages in your app.

3

Use toast in your app

Use the below syntax to get access to the toast component and use it accordingly.

toast.success("🚀 Logged out successfully!");

Live Demo Source Code