Numerous Problems Multiplied
Miss any of our Open RFC calls?Watch the recordings here! »

material-ui-confirm

2.1.1 • Public • Published

Material-UI confirm GitHub license npm version Build Status Coverage 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.

Installation

npm install --save material-ui-confirm

Demo

Edit 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(() => { /* ... */ })
      .catch(() => { /* ... */ });
  };
 
  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 on confirmation and rejected on cancellation).

Options:
Name Type Default Description
title ReactNode 'Are you sure?' Dialog title.
description ReactNode '' Dialog content.
confirmationText ReactNode 'Ok' Confirmation button caption.
cancellationText ReactNode '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.

Install

npm i material-ui-confirm

DownloadsWeekly Downloads

4,165

Version

2.1.1

License

MIT

Unpacked Size

23.2 kB

Total Files

6

Last publish

Collaborators

  • avatar