limit total number of toasts

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]

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]

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