Toast - Code Snippet

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

Install react-toastify npm package

npm i react-toastify

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.

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