[Snackbar] Display stacked Snackbars

[ZeeshanTamboli]

• I have followed (at least) the PR section of the contributing guide.

Resolves #1824
Resolves #18098

This is an opt-in feature.

This work is a replacement of notistack.

Demo preview: https://deploy-preview-31991--material-ui.netlify.app/material-ui/react-snackbar/#experimental-api

Initial implementation and idea could be reviewed.

Should I move it to MUI lab? If yes, how to reuse the Snackbar component styles into SnackbarsProvider styles without duplicating code by exporting from mui/material to mui/lab but not providing it to user in mui/material?

TODO

• Implement other props in SnackbarsProvider.
• Add tests
• Improve docs
• Fix typescript types (Remove @ts-expect-error and fix types)
• Move to lab (files + docs) ([Snackbar] Display stacked Snackbars #31991 (comment))

---

Edit: Ready for review!

[mui-bot]

Netlify deploy preview

• docs/data/material/components/snackbars/snackbars.md

@material-ui/lab: parsed: +3.73% , gzip: +3.23%

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against 67e94e0

[Nic-S]

I read with pleasure about this new feature, if I may I would have a consideration. The main advantage of react-tostify is the fact that you can use it outside the lifecycle of a react component, two practical examples of this use might be:

• invoke the snackbar within an action if the application uses redux-toolkit or other state management (in this case perhaps you can mitigate by passing the result of the useSnackbars hook but would need to find a way not to pass it every time you invoke an action that requires a snackbar)
• invoke the snackbar inside an interceptor, for example an axios interceptor that handles some generic errors.
  @ZeeshanTamboli Is there a way to expose the show() and close() api for the above examples?

[ZeeshanTamboli]

I read with pleasure about this new feature, if I may I would have a consideration. The main advantage of react-tostify is the fact that you can use it outside the lifecycle of a react component, two practical examples of this use might be:

• invoke the snackbar within an action if the application uses redux-toolkit or other state management (in this case perhaps you can mitigate by passing the result of the useSnackbars hook but would need to find a way not to pass it every time you invoke an action that requires a snackbar)
• invoke the snackbar inside an interceptor, for example an axios interceptor that handles some generic errors.

Thanks @Nic-S for taking a look!

@ZeeshanTamboli Is there a way to expose the show() and close() api for the above examples?

I am not quite understanding your examples without a code example. Anyway, we want to first release this useSnackbars hook and then we can iterate more on it and add new features.

[FaabLondon]

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

[jpsala]

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

It's not there yet it seems :(

[jpsala]

Hi, there is a release date for this feature?

[ZeeshanTamboli]

Hi, there is a release date for this feature?

There is no release date. We are planning to build unstyled stacked snackbars first. And then we will rebuild this on top of that unstyled version.

[jpsala]

Hi, there is a release date for this feature?

There is no release date. We are planning to build unstyled stacked snackbars first. And then we will rebuild this on top of that unstyled version.

Thank you!

[ZeeshanTamboli]

@mui/core I moved the docs from Lab to Material UI Snackbar page.

[gnowland]

Hi, there is a release date for this feature?

There is no release date. We are planning to build unstyled stacked snackbars first. And then we will rebuild this on top of that unstyled version.

Current progress: #31991 (comment)

(Since the "progress" comment is now hidden under "Load more..." (thanks, github 🙄 -- upvote the "pinned comment" feature request: https://github.com/orgs/community/discussions/47912))

[gnowland]

Hi, there is a release date for this feature?

There is no release date. We are planning to build unstyled stacked snackbars first. And then we will rebuild this on top of that unstyled version.

@ZeeshanTamboli do we have to wait until all unstyled components (mui/base-ui#10) are completed, or now that the unstyled snackbar component is complete is work on

2. [ ] Merge this UnstyledSnackbar component in this PR and use it here for stacked snackbars in the lab implementation. Build it with Material design.

(from #31991 (comment)) able to proceed and this component be available independently of all unstyled components being completed?