[Snackbar] Add imperative methods to display them directly

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/
• https://github.com/mui-org/material-ui/issues/21053#issuecomment-630119128
• https://twitter.com/listenMrUtkarsh/status/1283480376904568833
• https://trello.com/c/tMdlZIb6/1989-snackbar-more-features