[Snackbar] Add imperative methods to display them directly #18098
Description
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