Stacked mode. Mobile. After being closed, notifications does not stack again.

Author: JustinasAltaraviciusCreated Nov 20, 2025Updated Nov 26, 2025

Vid:

https://github.com/user-attachments/assets/7e298a6f-4872-481d-b4fa-3934e6864d18

Code:

layout.tsx

import

import { ToastBtn } from "./ToastBtn";

export default function RootLayout() {
  return (
    <html lang="en">
      <body>
        <ToastBtn />
      </body>
    </html>
  );
}

ToastBtn.tsx

bash


import { ToastContainer, toast } from "react-toastify";

export const ToastBtn = () => {
  const notify = () => toast("Wow so easy !");

  return (
    <div className="grid place-items-center h-dvh bg-zinc-900/15">
      <button onClick={notify}>Notify !</button>
      <ToastContainer stacked position="bottom-center" />
    </div>
  );
};

Source: fkhadra/react-toastify

View original on GitHub View discussion on GitHub