[Snackbar] Add stacking support/display several

[f0und3r]

Summary 💡

Place multiple snack bars on the page.

Examples 🌈

Motivation 🔦

Will the material design specification discourages to display multiple snackbar, and could stay the default, display multiple is a common use case:

Only one snackbar may be displayed at a time.

https://material.io/components/snackbars#usage

Benchmark

• https://trello.com/c/tMdlZIb6/1989-snackbar-more-features
• https://react-hot-toast.com/
• https://mantine.dev/others/notifications/
• https://blueprintjs.com/docs/#core/components/toast
• https://seek-oss.github.io/braid-design-system/components/useToast
• https://github.com/fkhadra/react-toastify
• https://chakra-ui.com/toast
• https://ant.design/components/message/
• https://github.com/iamhosseindhv/notistack/
• https://sancho-ui.com/components/toast/
• https://evergreen.segment.com/components/toaster
• https://twitter.com/railto/status/1232997843020996610
• https://baseweb.design/components/toast/
• https://toasted-notes.netlify.com/
• https://github.com/kylecesmat/react-cheers
• https://jossmac.github.io/react-toast-notifications/
• https://github.com/mui-org/material-ui/issues/21053#issuecomment-630119128
• https://twitter.com/listenMrUtkarsh/status/1283480376904568833

[thataustin]

Not to redirect the question... but is there a way to specify the placement of the snackbar? I noticed the example puts it in the bottom center of the page, but it always show up bottom left for me.

That might be what you're asking as well, @f0und3r ?

[damianobarbati]

Any news on this? Having several snackbar is indeed useful.

[oliviertassinari]

@damianobarbati Do you mean several snackbar on the screen at the same time? I think that the material specification is discouraging for that use case. An alternative is to dismiss the currently displayed message for a new one.

[damianobarbati]

@oliviertassinari are you sure about this? :(

[mbrookes]

@damianobarbati LMGTFY: https://material.io/guidelines/components/snackbars-toasts.html "Only one snackbar may be displayed at a time."

[iamhosseindhv]

Although guidelines recommend not to stack snackbars, we needed them for our internal use.

So I made this package called notistack. Hope it helps. You can position and customize it the same way you do for material-ui Snackbars, as all props get passed down to a material-ui Snackbar. 🎉🎉🙂

[oliviertassinari]

@iamhosseindhv Sweet 😍 ! Do you want to add a link in the documentation?

[iamhosseindhv]

That would be great. 😍 I'll keep working on it to make it more customisable then. 👍🏼

[dotmaike]

@damianobarbati LMGTFY: https://material.io/guidelines/components/snackbars-toasts.html "Only one snackbar may be displayed at a time."

https://material.io/components/snackbars/#usage

[aakash-verma-aurea]

Having only one snackbar displayed at a time is stupid. Leave it to the dev and UX on how many make sense, but there are an infinite number of instances, where two or more notifications come up at the same time with different priorities and importance for a given user and we cannot afford to delay and show them one by one.

Just going for react-toastify ..

[zgover]

Having only one snackbar displayed at a time is stupid. Leave it to the dev and UX on how many make sense, but there are an infinite number of instances, where two or more notifications come up at the same time with different priorities and importance for a given user and we cannot afford to delay and show them one by one.

Just going for react-toastify ..

@aakash-verma-aurea the intention of single display for snackbar is to adhere to the Material Design guidelines. This change would be a deviation to Material Design and specifically doing the exact example provided of what not to do. However, with that being said I am in favor of this deviation so long that it is opt-in only. For those cases it is best to adhere to the guidelines such as mobile devices with limited real estate this could potentially block interaction when they fill the screen.

[aakash-verma-aurea]

@zgover I totally understand and I'm blaming nothing but the guidelines. Opt-in totally works. One cannot have the same guidelines for all screen sizes as then devices at both ends of the spectrum(mobile vs laptops) suffer in one way or the other.

[64J0]

It would be great if we have the possibility of showing more than one snackbar at a time folks. Let the dev decide what to do.

[ggcaponetto]

Hi, I ended up building a library for this use case with an imperative API. Check it out! https://github.com/ggcaponetto/mui-gotit

[ZeeshanTamboli]

PR opened for this at #31991 . We will be releasing it under MUI Lab initially.

Demo preview: https://deploy-preview-31991--material-ui.netlify.app/material-ui/react-snackbar/#experimental-api. We will be polishing the demos further.

[yurijmikhalevich]

@ZeeshanTamboli, hi! 👋 Great news. Are there any updates on this?

[ZeeshanTamboli]

Hi @yurijmikhalevich . You can follow #31991.

[TheRealCuran]

Yes, please! You have my :+1: (bonus points if I can configure which "type" can be stacked and which not. Ie. I want errors stacked but infos/successes only replacing each other.

[FaabLondon]

Hello, thanks for this https://deploy-preview-31991--material-ui.netlify.app/material-ui/react-snackbar/#experimental-api in which version of mui/lab is it available? It does not seem to be available in 5.0.0-alpha.112 thanks

[g4ngzt4]

It's pretty easy to do yourself without any external libraries: https://codesandbox.io/s/mui-snack-stack-jnrnwq?file=/src/App.tsx