Feat: Limit the number of toast displayed at the same time

[popuguytheparrot]

Do you want to request a feature or report a bug?
feature
What is the current behavior?
No limited on showing

What is the expected behavior?
Props to limited toast showing

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React v16.7

[fkhadra]

Hello @popugang,

You can already pass a component and limit the output. For instance, lets do it with css and a functional component.

 .limited-output{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

// somewhere in your app
toast(() => (
  <div className="limited-output">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem 
  praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt 
  nisi eveniet!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem voluptates vel dolorum 
  autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam 
  repudiandae
</div>
);

You can find more about rendering a component here

[popuguytheparrot]

@fkhadra You do not understand me. I want to limit the notification showing.
i want props showCount={3} and watching only 3 toast on the site

[fkhadra]

Hello @popugang,

You mean limit the number of toast displayed at the same time ?

[popuguytheparrot]

Hello @popugang,

You mean limit the number of toast displayed at the same time ?

exactly

[popuguytheparrot]

@fkhadra what can do with it ?

[popuguytheparrot]

@fkhadra reopen issue please

[fkhadra]

Hello @popugang,

Sorry I'm quite busy for the moment. I made a codesanbox to show you how you can limit the output. There is several ways to do it. The sandbox just give you the general idea.

[popuguytheparrot]

@fkhadra thank you very much

[headfire94]

Will be cool to have a buffer that will store delayed notifications until we can show them

[Rafi993]

It would be awesome if this is available as an option in the toast container

[mudrila]

@fkhadra Any progress on that so far? Maybe, you would need additional help?

[marcosandri-dev]

I need this feature too, to me it would be super cool to have n toasters and having the old ones to close automatically as the new ones appear!

[mrnguyentrantam]

I also need this feature

[HZSamir]

I would love such a feature as well. Have to handle this myself for now.

[zslucky]

I faced same issue

[fkhadra]

Hello guys,

I'm rewriting the library, maybe I'll port it to typescript. The goal is to reduce the bundle size and also to lower the barrier for newcomers. I'll see how to add this feature.

[rami-sweyri]

also i need this feature

[shubhamappstec]

also i need this feature

[taimoorgit]

+1; I'd love to have a maxCount I can pass to toast.configure()

[fkhadra]

Hey, a v6 release candidate is available including that feature. You can try it here

[zslucky]

@fkhadra great release, thank you so much. I have a scenario that need to display the latest limited toasts, and hide the oldest toasts, as my site need to push the latest real-time messages to users, queued toasts may delay some important informations... is it necessary support 2 modes for count limit? LRU and Queued?

[fkhadra]

@zslucky the v6(not RC) is now live. Maybe this can help https://fkhadra.github.io/react-toastify/limit-the-number-of-toast-displayed/#how-to-clear-the-waiting-queue

[zslucky]

@fkhadra thanks, this can be a solution. 👍

[mmesar]

Do we, maybe, have access to that queue. I am interested in a number of notifications in queue. Or, and I know this is not the topic, can we get number of currently displayed notifications. For example, I would like to display "dismiss all" button inside notification only when there are more than 3 notifications displayed (have searched for this feature but haven't found it, apologies if it exists, in that case plz point me in the right direction).

[Shielsy]

I'm not using the ToastContainer but there doesn't seem a way to set the limit property programmatically. Will this be added? Also, a 'dismiss all' button would be nice as mentioned above