limit total number of toasts

[Kilian]

Hey! Awesome library. Something that would be useful for me is an option to set the maximum number of visible toasts, that will automatically dismiss the oldest one when the maximum is reached.

I could do that with useToaster and a filter but then I would have to replicate everything else <Toaster /> already does, so I would prefer not to.

[timolins]

That sounds like a reasonable improvement that shouldn't be too hard to implement. Consider this as on the road map.

[m-yasir]

Hey @timolins. I have been looking at some open source projects to contribute to, and this looks like one awesome project I am willing to work on. Would you mind having me look at this issue?

[ilhamwahabi]

I'm also find this useful, since show multiple toast in a time a bit not needed

Is there any way how to do this with current version? At least without using useToaster

[timolins]

You can achieve by using useToasterStore() & useEffect(). We can read the state of all toasts, and dismiss them if our limit is reached.

const { toasts } = useToasterStore();

const TOAST_LIMIT = 3

useEffect(() => {
  toasts
    .filter((t) => t.visible) // Only consider visible toasts
    .filter((_, i) => i >= TOAST_LIMIT) // Is toast index over limit?
    .forEach((t) => toast.dismiss(t.id)); // Dismiss – Use toast.remove(t.id) for no exit animation
}, [toasts]);

Check out this CodeSandbox example.

[timolins]

I think the proposed solution works well enough – no need to add this as native API IMO.

[weeebdev]

We wanted to extend it in a corp ui-kit. Could you add a possibility to change TOAST_LIMIT from <Toaster/> props? Or should I open a PR?

react-hot-toast/src/core/store.ts

Line 4 in 0d417d9

const TOAST_LIMIT = 20;

I think the proposed solution works well enough – no need to add this as native API IMO.

[timolins]

According to the demand, it's time for a proper API. Will look into this for the next release.

[mcintyre94]

Thanks @timolins! I'd be happy to write a PR for this if you'd be open to that?

[413n]

Any news?

[brandonrbridges]

Anything yet @timolins?

[LuisEgan]

In the meantime, I used @timolins filter solution in a hook so I don't have to write that useEffect everywhere:

useToast.ts

import { useEffect, useState } from "react";
import t, { useToasterStore } from "react-hot-toast";

const useToast = () => {
  const { toasts } = useToasterStore();

  const [toastLimit, setToastLimit] = useState<number>(3);

  useEffect(() => {
    toasts
      .filter((tt) => tt.visible)
      .filter((_, i) => i >= toastLimit)
      .forEach((tt) => t.dismiss(tt.id));
  }, [toasts]);

  const toast = {
    ...t,
    setLimit: (l: number) => {
      if (l !== toastLimit) {
        setToastLimit(l);
      }
    },
  };

  return { toast };
};

export default useToast;

Still, hopefully it'll be part of the native API soon

[brandonrbridges]

@LuisEgan Yeah, I've used a similar solution as I wanted to set a max limit on mobile devices.

Hoping to have an official API soon.

[jeremiah-olisa]

I created a custom toaster component based on previous comments,

`
const CustomRHToaster = () => {
const { toasts } = useToasterStore();

const TOAST_LIMIT = 10;

useEffect(() => {
toasts
.filter((_toast) => toast.visible) // Only consider visible toasts
.filter((, i) => i >= TOAST_LIMIT) // Is toast index over limit?
.forEach((_toast) => toast.dismiss(_toast.id)); // Dismiss – Use toast.remove(_toast.id) for no exit animation
}, [toasts])

return

}
`

[relativelyrehan]

Any Update guys on this ??

[AmirHmZz]

Any updates on this?

[belalahmad20]

There's kind of a hack using css -

Give a containerClassName in Toaster -

<Toaster ... containerClassName="toaster-wrapper" ...

And simply put this in your css -

.toaster-wrapper > div { display: none !important; } .toaster-wrapper > div:first-child { display: flex !important; }

and you can use nth-child concept to show the number of toast you want.

[Werthis]

Any updates?

[jeremiah-olisa]

You can create a custom hook to do that

…

On Wed, 26 Apr 2023, 11:36 am Łukasz, ***@***.***> wrote: Any updates? — Reply to this email directly, view it on GitHub <#31 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHNDZFJYSAQ2TKIUBXPROZTXDD3DLANCNFSM4WTVSV2Q> . You are receiving this because you commented.Message ID: ***@***.***>

[omateusamaral]

if your case its showing the same error unlimited times, you can use the option "id" to prevent this.
https://react-hot-toast.com/docs/toast
example:

toast.success('Copied to clipboard!', {
 id: 'clipboard',
});```

[AmirHmZz]

Any updates @timolins ?

[siyao-polarr]

if your case its showing the same error unlimited times, you can use the option "id" to prevent this. https://react-hot-toast.com/docs/toast example:

toast.success('Copied to clipboard!', {
 id: 'clipboard',
});```

I tried this method since the other method with toaster store would make the animation very funky and old toasts not disappearing immediately. This method is much nicer since it just replaces the content of the toast. However it since like the last toast would linger for a long time since the duration has been accumulating for the same id? This feels like a bug and shouldnt happen though. The correct behavior should reset the timer but not accumulating it?

[nyctonio]

.toaster-wrapper > div { display: none !important; } .toaster-wrapper > div:nth-child(-n+3) { display: flex !important; }

this works

[nyctonio]

<Toaster ... containerClassName="toaster-wrapper" ...

<Toaster ... containerClassName="toaster-wrapper" ...

[NickNaskida]

Any updates on this? This is a very basic feature that shouldn't be hard to add to the library

[the-iter8]

It is just absurd that the issue has been opened since 2021 and there is still no new addition in the api.

[relativelyrehan]

I think it's time someone create a fix for this and create one PR

[Shielsy]

Any update on this? I've just switched to using toastr but I may have to find an alternative if this is not fixed/added.

[pranavgoel29]

Please add an inbuilt method/option for this, I had to implement the whole logic my self. 🫠
If possible please add info() and warning() methods. 🙏🏻

[simon-schuster]

Any updates on this? I think the number limit would be an awesome feature. Also adding info() and warning() mentioned by
@pranavgoel29 would improve this package a lot.

[softmarshmallow]

Hi. here's a simple wrapper component ToasterWithMax

"use client";

import React, { useEffect } from "react";
import toast, { Toaster, useToasterStore } from "react-hot-toast";

function useMaxToasts(max: number) {
  const { toasts } = useToasterStore();

  useEffect(() => {
    toasts
      .filter((t) => t.visible) // Only consider visible toasts
      .filter((_, i) => i >= max) // Is toast index over limit?
      .forEach((t) => toast.dismiss(t.id)); // Dismiss – Use toast.remove(t.id) for no exit animation
  }, [toasts, max]);
}

export function ToasterWithMax({
  max = 10,
  ...props
}: React.ComponentProps<typeof Toaster> & {
  max?: number;
}) {
  useMaxToasts(max);

  return <Toaster {...props} />;
}

Usage

<ToasterWithMax position="bottom-center" max={3} />