<h1 align="center">React Material-UI Confirm</h1>
npm install react-mui-confirmsh
// 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 (
);
};
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;
};
``