Material-UI confirm

Straightforward use of @material-ui/core confirmation dialogs with 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 to get 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

A component required to render a dialog in the component tree.

useConfirm() => confirm

A hook returning the confirm function.

confirm([options]) => Promise

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.