React Material-UI Confirm

Examples

Codesandbox Demo

Requirements

``sh
// 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.

`sh
// with npm
npm install react-mui-confirm

// with yarn
yarn add react-mui-confirm
`

$3

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


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

return (



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

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

return (





)
`

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

`jsx
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 (

Click

);
};

export default Item;
`

Options

$3

`ts
type GlobalOptions = {
confirmButtonText?: string;
cancelButtonText?: string;
enableRejectOnCancel?: boolean;
dialogProps?: Omit;
dialogTitleProps?: DialogTitleProps;
dialogContentProps?: DialogContentProps;
dialogContentTextProps?: DialogContentTextProps;
dialogActionsProps?: DialogActionsProps;
confirmTextFieldProps?: Omit;
timerProgressProps?: Partial;
confirmButtonProps?: Omit;
cancelButtonProps?: Omit;
};
`

$3

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

$3

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

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