React Material-UI Confirm

React Hooks based confirm dialog component built for @material-ui/core.

Examples

Codesandbox Demo

Requirements

// React
>=16 || 18.0.0-rc.0

// Material UI
@emotion/react: >=11
@emotion/styled: >=11
@mui/material: >=5.0.0

Getting Started

React-mui-confirm is available as an npm package.

// with npm
npm install react-mui-confirm

// with yarn
yarn add react-mui-confirm

Setup

1. Wrap your app with ConfirmDialogProvider component. See available options below.

import { ConfirmDialogProvider } from 'react-mui-confirm';

return (
  <ConfirmDialogProvider>
    <App />
  </ConfirmDialogProvider>
)

2. If you're using material-ui ThemeProvider, make sure ConfirmDialogProvider is a child of it.

import { ThemeProvider } from '@material-ui/core/styles';
import { ConfirmDialogProvider } from 'react-mui-confirm';

return (
  <ThemeProvider theme={theme}>
    <ConfirmDialogProvider>
      <App />
    </ConfirmDialogProvider>
  </ThemeProvider>
)

3. Import useConfirmDialog hook wherever you need the confirm dialog.

import React from 'react';
import Button from '@material-ui/core/Button';
import { useConfirmDialog } from 'react-mui-confirm';

const Item = () => {
  const confirm = useConfirmDialog();

  const handleClick = () =>
    confirm({
      title: 'Are you sure you want to confirm this thingy?',
    });

  return (
    <Button onClick={handleClick}>
      Click
    </Button>
  );
};

export default Item;

Options

ConfirmDialogProvider

type GlobalOptions = {
  confirmButtonText?: string;
  cancelButtonText?: string;
  enableRejectOnCancel?: boolean;
  dialogProps?: Omit<MUIDialogProps, "open" | "onClose">;
  dialogTitleProps?: DialogTitleProps;
  dialogContentProps?: DialogContentProps;
  dialogContentTextProps?: DialogContentTextProps;
  dialogActionsProps?: DialogActionsProps;
  confirmTextFieldProps?: Omit<TextFieldProps, "onChange" | "value">;
  timerProgressProps?: Partial<LinearProgressProps>;
  confirmButtonProps?: Omit<ButtonProps, "onClick" | "disabled">;
  cancelButtonProps?: Omit<ButtonProps, "onClick">;
};

useConfirmDialog() => confirm

This hook returns the confirm function and doest not take any props.

confirm([ConfirmOptions]) => Promise

Confirm function can accept GlobalOptions, but be aware they will override options from ConfirmDialogProvider.

type ConfirmOptions = GlobalOptions & {
  title: string;
  description?: React.ReactNode;
  confirmText?: string;
  timer?: number;
  onConfirm?: () => Promise<void> | void;
};