@jhelom/react-mui-message-dialog 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +68 -0
- package/package.json +3 -2
package/README.md
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
# react-mui-message-dialog
|
|
2
|
+
|
|
3
|
+
# Overview
|
|
4
|
+
|
|
5
|
+
`react-mui-message-dialog` is a simple and flexible message dialog component library for React + MUI (Material-UI) environments.
|
|
6
|
+
|
|
7
|
+
- Unified UI based on MUI's Dialog component
|
|
8
|
+
- Promise-based API for easy alert, confirm, and error dialogs
|
|
9
|
+
- Global dialog management via Context Provider
|
|
10
|
+
- TypeScript support
|
|
11
|
+
|
|
12
|
+
Ideal for business applications and admin dashboards where you need to display messages or confirmations to users.
|
|
13
|
+
|
|
14
|
+
# Install
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm i @jhelom/react-mui-message-dialog
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
# Usage
|
|
21
|
+
|
|
22
|
+
Wrap your application with `MessageDialogProvider` to enable global message dialog functionality. This provider manages the dialog state and allows you to use the `useMessageDialog` hook anywhere in your component tree.
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import { MessageDialogProvider } from "@jhelom/react-mui-message-dialog";
|
|
26
|
+
|
|
27
|
+
createRoot(document.getElementById("root")!).render(
|
|
28
|
+
<StrictMode>
|
|
29
|
+
<MessageDialogProvider>
|
|
30
|
+
<App />
|
|
31
|
+
</MessageDialogProvider>
|
|
32
|
+
</StrictMode>
|
|
33
|
+
);
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
After wrapping your app with `MessageDialogProvider`, you can use the `useMessageDialog` hook in any component. This hook provides functions to show alert, confirm, and error dialogs as Promises, making it easy to handle user interactions asynchronously.
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
import { useMessageDialog } from "@jhelom/react-mui-message-dialog";
|
|
40
|
+
|
|
41
|
+
const messageDialog = useMessageDialog();
|
|
42
|
+
|
|
43
|
+
// Show an alert dialog
|
|
44
|
+
await messageDialog.alert("Alert Message");
|
|
45
|
+
|
|
46
|
+
// Show a confirm dialog
|
|
47
|
+
const result = await messageDialog.confirm("Confirm Message");
|
|
48
|
+
if (result) {
|
|
49
|
+
// OK
|
|
50
|
+
} else {
|
|
51
|
+
// Cancel
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// Show an error dialog
|
|
55
|
+
await messageDialog.error("Error Message");
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Alert
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
## Confirm
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
## Error
|
|
67
|
+
|
|
68
|
+
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jhelom/react-mui-message-dialog",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.es.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"files": [
|
|
8
|
-
"dist"
|
|
8
|
+
"dist",
|
|
9
|
+
"README.md"
|
|
9
10
|
],
|
|
10
11
|
"peerDependencies": {
|
|
11
12
|
"@mui/material": ">=5",
|