material-ui-confirm-reason

Material-UI confirm with reason

Confirming user choice is a good thing to do, it should also be easy to do.

This package provides simple confirmation dialogs built on top of @material-ui/core and straightforward to use thanks to React Hooks. Based on the work of Jonatan Klosko's material-ui-confirm.

Installation

npm install --save material-ui-confirm-reason

Demo

Run with ZZ

npm run storybook

Usage

Wrap your app inside the ConfirmProvider component.
Note: If you're using Material UI ThemeProvider, make sure ConfirmProvider is a child of it.

import React from 'react';
import { ConfirmProvider } from 'material-ui-confirm';
 
const App = () => {
  return (
    <ConfirmProvider>
      {/* ... */}
    </ConfirmProvider>
  );
};
 
export default App;

Call the useConfirm hook wherever you need the confirm function.

import React from 'react';
import Button from '@material-ui/core/Button';
import { useConfirm } from 'material-ui-confirm';
 
const Item = () => {
  const confirm = useConfirm();
 
  const handleClick = () => {
    confirm({ description: 'This action is permanent!' })
      .then(() => { /* ... */ });
  };
 
  return (
    <Button onClick={handleClick}>
      Click
    </Button>
  );
};
 
export default Item;

API

ConfirmProvider

This component is required in order to render a dialog in the component tree.

Props:

Name	Type	Default	Description
defaultOptions	object	{}	Overrides the default options used by confirm.

useConfirm() => confirm

This hook returns the confirm function.

confirm([options]) => Promise

This function opens a confirmation dialog and returns a promise representing the user choice (resolved, with reason, on confirmation and rejected otherwise).

Options:

Name	Type	Default	Description
title	string	'Are you sure?'	Dialog title.
description	string	''	Dialog content.
confirmationText	string	'Ok'	Confirmation button caption.
cancellationText	string	'Cancel'	Cancellation button caption.
dialogProps	object	{}	Material-UI Dialog props.
confirmationButtonProps	object	{}	Material-UI Button props for the confirmation button.
cancellationButtonProps	object	{}	Material-UI Button props for the cancellation button.
reason	object	undefined	Supply to show and possibly validate a reason field
reasonTextProps	object	{}	Material-UI TextField props for the text field.

Reason options:

To have a Reason field displayed and the typed in text supplied with the confirmation button configure the reason field with the following options

Name	Type	Default	Description
error	bool	false	Set to true to show the text in red.
errorMsg	string	Empty string	Helper text shown under the text field.
check	function	undefined	Function that will be called to check is the text in the reason field is ok (string) => {... return "error msg;" or return;}.