Multiple stacked toasts outside viewport

[CalvinJamesHeath]

On a social network app, I was using toasts to show notifications. The problem is, if a user receives a lot of inquiries, only 6-7 will fit on the screen, and toasting them all at once prevents you from scrolling down to see the remaining ones.

To view the remaining toasts, one would want to scroll down.

[fkhadra]

Hey @CalvinJamesHeath do you have a screenshot or a video? Just want to see how I could address the issue

[CalvinJamesHeath]

[sebakthapa]

Quick Fix

Only a simple UI fix for such overflowing toasts.

There is a limit option in the <ToastContainer />.

<ToastContainer
 ...otherOptions
 limit={5}
/>

This limits the number of the toasts to be displayed. All the overflowing toasts will be queued and will be displayed after at least one of the 5 toast is closed (or closes automatically).

However, user have to wait for new toasts to appear on the viewport if the toast count exceeds the limit count. They can't scroll to view the queued toasts.

[CalvinJamesHeath]

That works great thank you guys @sebakthapa and @fkhadra 👏🏼

[sebakthapa]

I'm glad to hear that it's working well. If you have any further questions or issues, feel free to let us know. 😊