material-ui-confirm

Material-UI confirm

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.

Installation

npm install --save material-ui-confirm

Demo

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

Thi function opens a confirmation dialog and returns a promise representing the user choice (resolved 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.

Changelog

2.0.2

• Add TypeScript definitions