material-ui-confirm-async v1.0.3

Material-UI confirm async

This package provides simple confirmation dialogs built on top of @mui/material, @mui/lab and @material-ui-confirm and straightforward to use thanks to React Hooks.

This package is specificaly made for integration with asynchronous functions, promises, and callbacks.

Installation

npm install --save material-ui-confirm-async

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-async";

const App = () => {
  return <ConfirmProvider>{/* ... */}</ConfirmProvider>;
};

export default App;

Call the useConfirm hook wherever you need the confirm function.\ Note: A component calling useConfirm must be a child of ConfirmProvider.

import React from "react";
import Button from "@mui/material/Button";
import { useConfirm } from "material-ui-confirm-async";

const Item = () => {
  const confirm = useConfirm();

  const handleClick = () => {
    confirm({
      title: "Are you sure ?",
      description: "This action cannot be undone",
      confirmationText: "Accept",
      cancellationText: "Cancel",
      onConfirm: () =>
        new Promise((res, rej) => {
          setTimeout(() => {
            res("success");
          }, 2000);
        }),
    })
      .then((data) => {
        console.log(data);
      })
      .catch((e) => {
        console.log(e);
      });
  };

  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 on confirmation and rejected on cancellation).

Options

Useful notes

Confirm by pressing Enter

You can get this behavior by adding the autoFocus property to the confirmation button. This way the button is focused as soon as the dialog opens and hitting Enter naturally triggers a click.

Locally

const MyComponent = () => {
  // ...

  const handleClick = () => {
    confirm({ confirmationButtonProps: { autoFocus: true } })
      .then(() => {
        /* ... */
      })
      .catch(() => {
        /* ... */
      });
  };

  // ...
};

Globally

const App = () => {
  return (
    <ConfirmProvider
      defaultOptions={{
        confirmationButtonProps: { autoFocus: true },
      }}
    >
      {/* ... */}
    </ConfirmProvider>
  );
};