Material-ui: [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

[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. 👍🏼

[Kristiyan96]

Here's how I implemented multiple toasts

export default function Snackbars(props) {
  const [toasts, setToasts] = React.useState([]);

  useEffect(() => {
    document.addEventListener('show-toast-message', function (e) {
      var config = {
        id: Date.now(),
        message: e.detail.message,
        variant: e.detail.variant,
        duration: e.detail.duration || 4000,
        callback: e.detail.callback,
        open: true
      };

      addToast(config);
    });
  }, []);

  const addToast = toast_cnf => {
    setToasts(old_toasts => {
      return [toast_cnf, ...old_toasts];
    })
  }

  const removeToast = id => {
    setToasts(old_toasts => {
      return old_toasts.filter(t => t.id != id);
    })
  }

  return (
    <>
      {toasts.map(toast_params => 
        <ToastMessage
          key={toast_params.id}
          closeToast={id => removeToast(id)}
          {...toast_params}        
        />
      )}
    </>
  );
}

[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