[Snackbar] Add imperative methods to display them directly

[jiangyh1024]

Summary 💡

Support imperative calls for the sake of simplicity.

Examples 🌈

import { useSnackbar } from '@material-ui/core';

function MyComponent() {
  const snackbar = useSnackbar();

  return (
    <Button
      onClick={() => {
        snackbar({
          message: "My primary message for the user.",
          duration: 3000,
          variant: 'success',
        });
      }}
    >
      Trigger
    </Button>
  );
}

import { ConfigProvider } from '@material-ui/core';

<ConfigProvider snackbar={{ maxItems: 3 }} />

Motivation 🔦

Without such support, a developer has to set up a global event emitter system. It's cumbersome and tedious.

Benchmark

• https://react-hot-toast.com/
• https://dev.to/dmtrkovalenko/the-neatest-way-to-handle-alert-dialogs-in-react-1aoe
• 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/
• [Snackbar] Please describe how to easily set the slide direction for a toast #21053 (comment)
• https://twitter.com/listenMrUtkarsh/status/1283480376904568833
• https://trello.com/c/tMdlZIb6/1989-snackbar-more-features

[oliviertassinari]

@jiangyh1024 I'm 💯 onboard with you, I think that an imperative API makes a lot of sense. We recommend the usage of notistack for this problem, for now.

Follow the discussion with @leMaik in #17762 for more details. I think that we should snooze this problem for a good 6 months to see how people react.

[NearHuscarl]

I manage to solve a similar problem with Dialog. It's a bit easier in my case since I don't have to keep track of the key, you can just pop the top Dialog if you want to close. See my answer here for more detail. Btw, in Flutter you can already do that using showDialog which is a built-in method. Hope this will come to Material-UI soon.

[kasperpeulen]

Without such support, a developer has to set up a global event emitter system. It's cumbersome and tedious.

Is that true? You could write it like this, no?

export default function MyComponent() {
  const [snackbar, setSnackbar] = useState<{ message: string; duration: number }>();
  const onClose = () => setSnackbar(undefined);
  return (
    <>
      <Button
        onClick={() => {
          setSnackbar({
            message: "My primary message for the user.",
            duration: 3000,
          });
        }}
      >
        Trigger
      </Button>
      <Portal>
        <Snackbar
          open={snackbar != null}
          autoHideDuration={snackbar?.duration}
          onClose={onClose}
          message={snackbar?.message}
        ></Snackbar>
      </Portal>
    </>
  );
}

[oliviertassinari]

@kasperpeulen I think that your example precisely surfaces the issue. This is not enough. What happens if two Snackbar component tries to display a message? What's do we gain by writing this boilerplate, can't it be abstracted?

[ggcaponetto]

Maybe you want to check out the imperative Snackbar library that I built.
https://github.com/ggcaponetto/mui-gotit