material-ui-confirm-reason
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

Material-UI confirm with reason GitHub license npm version Build Status

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;}.

Package Sidebar

Install

npm i material-ui-confirm-reason

Weekly Downloads

2

Version

1.0.3

License

MIT

Unpacked Size

26.8 kB

Total Files

7

Last publish

Collaborators

  • cyco