React Confirm Hook


React Confirm Hook is a simple utility to easily manage confirm dialogs or similar components like toasts. It provides
full Typescript support and can be used with any React UI framework.

Quick start

Install this package (make sure that you have React 16 or higher installed):

``shell
npm i react-confirm-hook
`

The confirm dialog will need a mount point, so wrap your application in the ConfirmProvider:

`typescript
import App from './App.tsx';
import {ConfirmProvider} from 'react-confirm-hook';

render(
(



),
document.getElementById('root'),
);
`

Make sure to place the ConfirmProvider at the right level. Depending on your UI framework, you might want to have it
inside a theme provider or similar.

Next you need to create a confirm dialog component. As an example, we are using Material UI here:

`typescript jsx
import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from '@mui/material';
import {ReactNode} from 'react';
import {ConfirmProps} from 'react-confirm-hook';

type ConfirmDialogProps = ConfirmProps & {
title : string;
message : NonNullable;
};

const ConfirmDialog = ({
title,
message,
onConfirm,
onCancel,
isConfirming,
} : ConfirmDialogProps): ReactNode => (
open={open}
onClose={onCancel}
maxWidth="xs"
>
{title}


{message}



autoFocus
onClick={onCancel}
disabled={isConfirming}
>
Cancel

onClick={onConfirm}
color="primary"
loading={isConfirming}
>
Okay



);

export default ConfirmDialog;
`

Once you have your confirm dialog component, you can now use it directly in any other component:

`typescript jsx
import ConfirmDialog from './ConfirmDialog';

const Foobar = () : ReactNode => {
const confirm = useConfirm(ConfirmDialog);

return (
{
confirm({
title: 'Please confirm',
message: 'Please confirm that you want to do something',
onConfirm: () => {
console.log('Confirmed');
}
});
}}>
Do something

);
};
`

Your onConfirm() callback can either return void or Promise. When a promise is returned, the ConfirmDialog
component will receive isConfirming set to true and will not be allowed to be closed until the promise is resolved or
rejected.

You can additionally provide an onCancel()` callback which will be called when the user cancels the dialog in any way.
This callback will be fired once the dialog was closed.