@insdim-lab/mui-plugins v5.1.6
mui-plugins
Plugins for MUI (Promise-based Confirm Dialog, Snackbar, etc.)
Installation
npm 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.
import { ConfirmServiceProvider } from "@insdim-lab/mui-plugins";
import { createTheme, ThemeProvider } from "@mui/material/styles";
const theme = createTheme();
const defaultOptions = {
title: "Sure?",
content: "This operation cannot be undone.",
};
const App = () => (
<ThemeProvider theme={theme}>
<ConfirmServiceProvider defaultOptions={defaultOptions}>
{...otherComponents}
</ConfirmServiceProvider>
</ThemeProvider>
);
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
import { useConfirm } from "@insdim-lab/mui-plugins";
const SomeComponent = () => {
const confirm = useConfirm();
const handleClick = () =>
confirm({
title: "Sure?",
content: "This operation cannot be undone.",
catchOnCancel: true,
})
.then(() => {
console.log("confirmed");
})
.catch(() => {
console.log("canceled");
});
return <button onClick={handleClick}>Delete</button>;
};
Snackbar
Wrap the App component in SnackServiceProvider
(inside ThemeProvider
)
If a set of global basic options is needed, just use the defaultOptions
prop.
import { SnackServiceProvider } from "@insdim-lab/mui-plugins";
import { createTheme, ThemeProvider } from "@mui/material/styles";
const theme = createTheme();
const defaultOptions = {
message: "Operation succeeded",
};
const App = () => (
<ThemeProvider theme={theme}>
<SnackServiceProvider defaultOptions={defaultOptions}>
{...otherComponents}
</SnackServiceProvider>
</ThemeProvider>
);
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
import { useSnack } from "@insdim-lab/mui-plugins";
const SomeComponent = () => {
const snack = useSnack();
const handleClick = () =>
snack({
message: "Operation checked",
}).then(() => {
console.log("closed");
});
return <button onClick={handleClick}>ShowSnack</button>;
};
Spacer
Inspired by https://vuetifyjs.com/en/api/v-spacer/ Fill available space between two components inside a flexbox.
import { Spacer } from "@insdim-lab/mui-plugins";
const SomeComponent = () => (
<div style={{ display: "flex" }}>
<div>component A</div>
<Spacer />
<div>component B</div>
</div>
);
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 |