How to specify max number of toasts allowed to displayed?

[ccyen8358]

Hi,

Is there a way to limit the number of toasts displayed on the screen?

It would be nice to be able to specify the max amount of toasts displayed on screen and dismiss the oldest toast once the max limit is reached, but I couldn't seem to find the prop to do it.

Thank you.

[FrigonTech]

dude, make a file in app directory like ToastManager and inside it add this code:

"use client";
import toast from "react-hot-toast";
import {useState} from "react";


export function useNotifications() {
  const [notifications, setNotifications] = useState<string[]>([]);

  const addNotification = (toastID: string) => {
    setNotifications((prev) => {
      // if limit exceeded, remove the first toast
      if (prev.length >= 8) { // 8 is the maximum number of notifications that are allowed on screen
        toast.remove(prev[0]);
        return [...prev.slice(1), toastID]; // drop first, add new
      }
      return [...prev, toastID];
    });
  };

  return { notifications, addNotification };
}

now import it in your page and make a declaration in your page function:

import { useNotifications } from "../ToastManager";

export default function SignupForm() {
    const {addNotification} = useNotifications();

and now wherever you wanna make a toast notification do it like this and call the following function just below it

const errorToast = toast.error("invalid password entry: empty password!")
addNotification(errorToast);

this way you can set the limit for your toast notifications