✅ mui-joy-confirm

Confirmation dialogs built on top of @mui/joy and react hooks. The source-code is a port of the material-ui-confirm package and is slightly rewritten to support @mui/joy.

Checkout this Example Storybook for a live demo or read the code.

📡 Install

npm install mui-joy-confirm

yarn add mui-joy-confirm

pnpm add mui-joy-confirm

👋 Hello there! Follow me @linesofcode or visit linesofcode.dev for more cool projects like this one.

🚀 Getting Started

First, render a ConfirmProvider near the root of your application. This will provide the useConfirm hook to all children.

import { ConfirmProvider } from 'mui-joy-confirm';

export default () => {
  return (
    <ConfirmProvider>
      <App />
    </ConfirmProvider>
  );
};

Now use the useConfirm hook to show confirmation dialogs.

import { Button } from '@mui/joy';
import { useConfirm } from 'mui-joy-confirm';

export default () => {
  const confirm = useConfirm();

  const handleDelete = () => {
    confirm({
      title: 'Delete this item?',
      description: 'This action is permanent!',
      confirmationText: 'Delete',
      cancellationText: 'Cancel',
    })
      .then(() => {
        // ran on confirm
      })
      .catch(() => {
        // ran on cancel
      });
  };

  return <Button onClick={handleDelete}>Delete</Button>;
};

You can also customize the dialog by passing defaultOptions to the ConfirmProvider or directly to the confirm function.

import { ConfirmProvider } from 'mui-joy-confirm';

export default () => {
  return (
    <ConfirmProvider
      defaultOptions={{
        confirmationButtonProps: {
          variant: `outlined`,
          color: `success`,
          size: `sm`,
        },
        cancellationButtonProps: {
          variant: `outlined`,
          color: `warning`,
          size: `sm`,
        },
      }}
    >
      <App />
    </ConfirmProvider>
  );
};