material-ui-confirm-reason v1.0.3

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:

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:

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