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