Toast

Toasts are the small, temporary notifications that slide in to confirm an action ("Saved!", "Logged out") or report an error, then disappear on their own. This snippet wires up react-toastify, which handles the queuing, positioning, timing, and dismissal for you. The pattern is simple: mount one container once at the root of the app, then call the toast object from anywhere in your code to push a message. I use this because hand-rolling a robust toast system (stacking, auto-dismiss, animations) is far more work than it looks.

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");
};

How it works

There are two halves. The first code block is the setup: rendering <ToastContainer /> once, here inside the custom MyApp component (Next.js's _app.js), so it lives above every page. The container is the single host element that actually renders and positions the toasts; you mount it once and never think about it again. Importing react-toastify/dist/ReactToastify.css brings in the default styling for the toasts and their animations.

The second code block shows it in use inside a logout handler. After signing out and dispatching the logout action, toast.success("🚀 Logged out successfully!") pushes a green success toast. Because the container is already mounted at the root, that call works from any component, hook, or async function without prop drilling or context, you just import toast and call it. The library also exposes variants like toast.error(), toast.info(), and toast.warning() for different styles.

Usage

npm i react-toastify

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 the below syntax to get access to the toast component and use it accordingly.

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

Notes & variations

A couple of practical points. Mount the ToastContainer exactly once, mounting it in multiple places leads to duplicate toasts. Don't forget the CSS import; without it the toasts render unstyled. You can configure the container globally (position, auto-close delay, theme, whether newest stacks on top) via props on <ToastContainer />, or override per toast by passing an options object as the second argument, for example toast.success("Saved", { autoClose: 2000 }).

Keep messages short and meaningful, toasts auto-dismiss, so they're for confirmations and non-blocking errors, not for anything the user must read or act on (use a dialog for that). For accessibility, react-toastify renders toasts in an ARIA live region so screen readers announce them, but since they vanish on a timer, avoid putting critical information or the only copy of an error message in a toast. Reserve toast.error() for failures and toast.success() for confirmations so the color coding stays trustworthy.

Live Demo