Skip to content

TimMikeladze/mui-joy-confirm

Repository files navigation

✅ 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>
  );
};
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy