https://github.com/timmikeladze/mui-joy-confirm
✅ Confirmation dialogs built on top of @mui/joy and react hooks.
https://github.com/timmikeladze/mui-joy-confirm
confirm confirm-dialog confirmation dialog joy joy-ui mui
Last synced: 5 months ago
JSON representation
✅ Confirmation dialogs built on top of @mui/joy and react hooks.
- Host: GitHub
- URL: https://github.com/timmikeladze/mui-joy-confirm
- Owner: TimMikeladze
- License: mit
- Created: 2023-12-27T23:11:27.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-01-06T13:32:46.000Z (5 months ago)
- Last Synced: 2025-01-06T14:33:26.790Z (5 months ago)
- Topics: confirm, confirm-dialog, confirmation, dialog, joy, joy-ui, mui
- Language: TypeScript
- Homepage: https://timmikeladze.github.io/mui-joy-confirm/
- Size: 342 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ✅ 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](https://github.com/jonatanklosko/material-ui-confirm) package and is slightly rewritten to support [@mui/joy](https://mui.com/joy-ui/).
Checkout this [Example Storybook](https://TimMikeladze.github.io/mui-joy-confirm/) for a live demo or [read the code](https://github.com/TimMikeladze/mui-joy-confirm/blob/master/src/stories/index.stories.tsx).
## 📡 Install
```console
npm install mui-joy-confirm
yarn add mui-joy-confirm
pnpm add mui-joy-confirm
```
> 👋 Hello there! Follow me [@linesofcode](https://twitter.com/linesofcode) or visit [linesofcode.dev](https://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.
```tsx
import { ConfirmProvider } from 'mui-joy-confirm';
export default () => {
return (
);
};
```
Now use the `useConfirm` hook to show confirmation dialogs.
```tsx
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 Delete;
};
```
You can also customize the dialog by passing `defaultOptions` to the `ConfirmProvider` or directly to the `confirm` function.
```tsx
import { ConfirmProvider } from 'mui-joy-confirm';
export default () => {
return (
);
};
```