mui-plugins

Plugins for MUI (Promise-based Confirm Dialog, Snackbar, etc.)

Installation

1npm install --save @insdim-lab/mui-plugins

Usage

Confirm

Inspired by https://github.com/jonatanklosko/material-ui-confirm
Wrap the App component in ConfirmServiceProvider (inside ThemeProvider)
If a set of global basic options is needed, just use the defaultOptions prop.

1import { ConfirmServiceProvider } from "@insdim-lab/mui-plugins";
2import { createTheme, ThemeProvider } from "@mui/material/styles";
3
4const theme = createTheme();
5const defaultOptions = {
6  title: "Sure?",
7  content: "This operation cannot be undone.",
8};
9
10const App = () => (
11  <ThemeProvider theme={theme}>
12    <ConfirmServiceProvider defaultOptions={defaultOptions}>
13      {...otherComponents}
14    </ConfirmServiceProvider>
15  </ThemeProvider>
16);

Then, when you need a confirm dialog, call the useConfirm hook to create a confirm function.
Note: The options provided in the confirm function parameters will override the global options

1import { useConfirm } from "@insdim-lab/mui-plugins";
2
3const SomeComponent = () => {
4  const confirm = useConfirm();
5
6  const handleClick = () =>
7    confirm({
8      title: "Sure?",
9      content: "This operation cannot be undone.",
10      catchOnCancel: true,
11    })
12      .then(() => {
13        console.log("confirmed");
14      })
15      .catch(() => {
16        console.log("canceled");
17      });
18
19  return <button onClick={handleClick}>Delete</button>;
20};

Snackbar

Wrap the App component in SnackServiceProvider (inside ThemeProvider)
If a set of global basic options is needed, just use the defaultOptions prop.

1import { SnackServiceProvider } from "@insdim-lab/mui-plugins";
2import { createTheme, ThemeProvider } from "@mui/material/styles";
3
4const theme = createTheme();
5const defaultOptions = {
6  message: "Operation succeeded",
7};
8
9const App = () => (
10  <ThemeProvider theme={theme}>
11    <SnackServiceProvider defaultOptions={defaultOptions}>
12      {...otherComponents}
13    </SnackServiceProvider>
14  </ThemeProvider>
15);

Then, when you need a snackbar, call the useSnack hook to create a snack function.
Note: The options provided in the snack function parameters will override the global options

1import { useSnack } from "@insdim-lab/mui-plugins";
2
3const SomeComponent = () => {
4  const snack = useSnack();
5
6  const handleClick = () =>
7    snack({
8      message: "Operation checked",
9    }).then(() => {
10      console.log("closed");
11    });
12
13  return <button onClick={handleClick}>ShowSnack</button>;
14};

Spacer

Inspired by https://vuetifyjs.com/en/api/v-spacer/ Fill available space between two components inside a flexbox.

1import { Spacer } from "@insdim-lab/mui-plugins";
2
3const SomeComponent = () => (
4  <div style={{ display: "flex" }}>
5    <div>component A</div>
6    <Spacer />
7    <div>component B</div>
8  </div>
9);

API

Confirm

ConfirmOptions

Type definition for confirm dialog options.

Name	Type	Default	Description
title	string	""	Dialog title
content	React.ReactNode	""	Dialog content
dialogProps	DialogProps	{}	MUI Dialog API
titleProps	DialogTitleProps	{}	MUI DialogTitle API
contentProps	DialogTitleProps	{}	MUI DialogContent API
actionProps	DialogActionsProps	{}	MUI DialogActions API
confirmButtonColor	ButtonTypeMap["props"]["color"]	"primary"	MUI Button Color Shortcut
confirmButtonText	React.ReactNode	""	Confirm Button Text
confirmButtonVariant	ButtonTypeMap["props"]["variant"]	"text"	Confirm MUI Button Variant Shortcut
confirmButtonProps	ButtonProps	{}	Confirm MUI Button Props
cancelButtonColor	ButtonTypeMap["props"]["color"]	"primary"	Confirm MUI Button Color Shortcut
cancelButtonText	React.ReactNode	""	Cancel Button Text
cancelButtonVariant	ButtonTypeMap["props"]["variant"]	"text"	Cancel MUI Button Variant Shortcut
cancelButtonProps	ButtonProps	{}	Cancel MUI Button Props
catchOnCancel	boolean	false	If true, the confirm function returns rejected Promise after being canceled

<ConfirmServiceProvider {defaultOptions: ConfirmOptions} />

Provide a global service context for confirm dialog.

useConfirm()

Return the confirm function.

confirm(options: ConfirmOptions) => Promise

Name	Type	Default	Description
options	ConfirmOptions	{}	Confirm Options

Snack

SnackOptions

Name	Type	Default	Description
message	React.ReactNode	""	Snackbar Message
severity	AlertProps["severity"]	"success"	MUI Alert Severity Shortcut
action	SnackbarProps["action"]	undefined	MUI Snackbar Action Shortcut
snackbarProps	SnackbarProps	{}	MUI Snackbar Props
alertProps	AlertProps	{}	MUI Alert Props

<SnackServiceProvider {defaultOptions: SnackOptions} />

Provide a global service context for snackbar.

useSnack()

Return the snack function.

snack(options: SnackOptions) => Promise

Name	Type	Default	Description
options	SnackOptions	{}	Snackbar Options