@4i/modal-manager 1.1.10 → 1.1.20

Sign up to get free protection for your applications and to get access to all the features.
Files changed (10) hide show
  1. package/package.json +42 -40
  2. package/readme.md +285 -285
  3. package/src/components/modal-provider.d.ts +1 -1
  4. package/src/components/modal-provider.js +8 -3
  5. package/src/components/modal-provider.tsx +169 -163
  6. package/src/index.ts +5 -5
  7. package/src/styles.css +77 -77
  8. package/src/utils/Manager.ts +27 -27
  9. package/src/utils/ModalManager.ts +94 -94
  10. package/tsconfig.json +17 -16
package/package.json CHANGED
@@ -1,40 +1,42 @@
1
- {
2
- "name": "@4i/modal-manager",
3
- "version": "1.1.10",
4
- "description": "",
5
- "main": "src/index.ts",
6
- "scripts": {
7
- "test": "echo \"Error: no test specified\" && exit 1",
8
- "build": "tsc",
9
- "start": "src/index.ts"
10
- },
11
- "repository": {
12
- "type": "git",
13
- "url": "git+https://github.com/tonichiga/modal-manager.git"
14
- },
15
- "keywords": [
16
- "modal",
17
- "manager",
18
- "react",
19
- "typescript"
20
- ],
21
- "author": "Toni",
22
- "license": "ISC",
23
- "bugs": {
24
- "url": "https://github.com/tonichiga/modal-manager/issues"
25
- },
26
- "homepage": "https://github.com/tonichiga/modal-manager#readme",
27
- "dependencies": {},
28
- "devDependencies": {
29
- "@babel/cli": "^7.23.4",
30
- "@babel/core": "^7.23.5",
31
- "@babel/plugin-transform-typescript": "^7.23.5",
32
- "@babel/preset-env": "^7.23.5",
33
- "@babel/preset-react": "^7.23.3",
34
- "@babel/preset-typescript": "^7.23.3",
35
- "@types/node": "^20.10.2",
36
- "@types/react": "^18.2.40",
37
- "@types/uuid": "^9.0.7",
38
- "typescript": "^5.3.2"
39
- }
40
- }
1
+ {
2
+ "name": "@4i/modal-manager",
3
+ "version": "1.1.20",
4
+ "description": "",
5
+ "main": "src/index.ts",
6
+ "scripts": {
7
+ "test": "echo \"Error: no test specified\" && exit 1",
8
+ "build": "tsc",
9
+ "start": "src/index.ts"
10
+ },
11
+ "repository": {
12
+ "type": "git",
13
+ "url": "git+https://github.com/tonichiga/modal-manager.git"
14
+ },
15
+ "keywords": [
16
+ "modal",
17
+ "manager",
18
+ "react",
19
+ "typescript"
20
+ ],
21
+ "author": "Toni",
22
+ "license": "ISC",
23
+ "bugs": {
24
+ "url": "https://github.com/tonichiga/modal-manager/issues"
25
+ },
26
+ "homepage": "https://github.com/tonichiga/modal-manager#readme",
27
+ "devDependencies": {
28
+ "@babel/cli": "^7.23.4",
29
+ "@babel/core": "^7.23.5",
30
+ "@babel/plugin-transform-typescript": "^7.23.5",
31
+ "@babel/preset-env": "^7.23.5",
32
+ "@babel/preset-react": "^7.23.3",
33
+ "@babel/preset-typescript": "^7.23.3",
34
+ "@types/node": "^20.10.2",
35
+ "@types/react": "^18.3.18",
36
+ "@types/uuid": "^9.0.7",
37
+ "typescript": "^5.3.2"
38
+ },
39
+ "dependencies": {
40
+ "@types/react-dom": "^18.3.0"
41
+ }
42
+ }
package/readme.md CHANGED
@@ -1,285 +1,285 @@
1
- # Modal manager
2
-
3
- [![npm version](https://badge.fury.io/js/%404i%2Fmodal-manager.svg)](https://badge.fury.io/js/%404i%2Fmodal-manager)
4
- [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
5
-
6
- Usage in Managing Multiple Modals, Popups, Notifications
7
-
8
- This package simplifies the management of multiple modals, popups, notifications, and similar UI elements within a project. It achieves this by leveraging events, maintaining a centralized list of modals, and assigning actions to them.
9
-
10
- ## Installation
11
-
12
- ```bash
13
- npm install @4i/modal-manager
14
- ```
15
-
16
- ## Example
17
-
18
- <a href="https://codesandbox.io/p/github/tonichiga/modal-manager-example/main?layout=%257B%2522sidebarPanel%2522%253A%2522GIT%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clsnqfzod00063p6le9554u03%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clsnqfzod00023p6lo9e5ocrg%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clsnqfzod00043p6l5kpjziav%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clsnqfzod00053p6lleknh8sj%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clsnqfzod00023p6lo9e5ocrg%2522%253A%257B%2522id%2522%253A%2522clsnqfzod00023p6lo9e5ocrg%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522clsnqfzod00053p6lleknh8sj%2522%253A%257B%2522id%2522%253A%2522clsnqfzod00053p6lleknh8sj%2522%252C%2522activeTabId%2522%253A%2522clsnqihgr00ht3p6l2nn59nq5%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522clsnqihgr00ht3p6l2nn59nq5%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clsnqfzod00043p6l5kpjziav%2522%253A%257B%2522id%2522%253A%2522clsnqfzod00043p6l5kpjziav%2522%252C%2522activeTabId%2522%253A%2522clsnqojb3003j3p6m98yg0rzn%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clsnqh362007k3p6lgb90p583%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522id%2522%253A%2522clsnqojb3003j3p6m98yg0rzn%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clsnqojh1001mdjig37kbat9k%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D">Codesandbox</a>
19
-
20
- ## Usage
21
-
22
- #### Instance methods:
23
-
24
- | Method | Description |
25
- | ------------------------------------ | ----------------------------------------------------- |
26
- | call(action, props) | Call a modal by its action name and pass props to it. |
27
- | |
28
- | close('all') | Close all modals. |
29
- | |
30
- | close(-1) | Close last modals. |
31
- | |
32
- | close(0) | Close first modals. |
33
- | |
34
- | close() | Close last modals. (default) |
35
- | |
36
- | onOpenModalState(callback) | Is there at least one window open now |
37
- | |
38
- | addEventListener(event, callback) | Add an event listener to the modal manager. |
39
- | |
40
- | removeEventListener(event, callback) | Remove an event listener from the modal manager. |
41
- | |
42
-
43
- #### ModalProvider props
44
-
45
- | Prop | Type | Description |
46
- | ------------------ | -------- | -------------------------------------------------------------------------- |
47
- | modalList | Object | An object containing modal actions as keys and modal components as values. |
48
- | className | string | |
49
- | isOverflow | boolean | Set "overflow: hidden" on body |
50
- | onModalStateChange | function | Callback function that is called when modal state changes. |
51
-
52
- #### Define Modal Actions:
53
-
54
- In your project, define modal actions as keys in the modalAction object. Each key represents a specific modal or UI element.
55
-
56
- ```javascript
57
- export const modalAction = {
58
- MODAL_PROMPT: "modal-prompt",
59
- // Additional modal actions...
60
- };
61
- ```
62
-
63
- #### Create Modal List:
64
-
65
- Create a list of modals in the list object, where keys are modal actions, and values are the corresponding modal components.
66
-
67
- ```javascript
68
- const list = {
69
- [modalAction.MODAL_PROMPT]: ModalPrompts,
70
- // Additional modals...
71
- };
72
- ```
73
-
74
- #### Call modals
75
-
76
- Call modals in your components by invoking modal.call with the desired modal action.
77
-
78
- ```javascript
79
- modal.call(modalAction.MODAL_PROMPT, {
80
- // Recieve props in your modal component
81
- title: "Modal title",
82
- content: "Modal content",
83
- });
84
- ```
85
-
86
- #### Extensibility
87
-
88
- If desired, you can inherit from the Manager class to create your own classes for handling custom notifications, popups, and more. And then pass your custom class to the CustomProvider component using ModalProvider as an example
89
-
90
- ```javascript
91
- import { Manager } from "@4i/modal-manager";
92
-
93
- import { Manager } from "@4i/modal-manager";
94
- import { v4 as uuidv4 } from "uuid";
95
-
96
- export const constants = {
97
- OPEN: "open-bottom-modal",
98
- CLOSE: "close-bottom-modal",
99
- };
100
-
101
- class CustomModalManager extends Manager {
102
- name: string;
103
- data: any;
104
-
105
- constructor() {
106
- super();
107
- this.name = "";
108
- this.data = {};
109
- }
110
-
111
- create(name: string, data) {
112
- this.name = name;
113
- this.data = data;
114
- this.emitter.emit(constants.OPEN, this.name, this.data);
115
- }
116
-
117
- call(name: string, data: any = {}) {
118
- this.create(name, { modalId: uuidv4(), data });
119
- }
120
-
121
- close(position?: number | string) {
122
- this.emitter.emit(constants.CLOSE, position);
123
- }
124
- }
125
-
126
- const customModalManager = new CustomModalManager();
127
-
128
- export default customModalManager;
129
- ```
130
-
131
- #### Custom Provider
132
-
133
- ```javascript
134
- import { memo, useEffect, useRef, useState } from "react";
135
- import bottomModal, { constants } from "../../service/BottomModal";
136
- import widgets from "../../config/modal/modal-list";
137
-
138
- const initialData = {
139
- data: null,
140
- };
141
-
142
- const BottomModalProvider = () => {
143
- const [data, setData] = useState(initialData);
144
- const [name, setName] = useState < string > null;
145
- const modalRef = useRef < HTMLDivElement > null;
146
-
147
- useEffect(() => {
148
- function handleOpenModal(name, data) {
149
- console.log("LOG", name);
150
- setName(name);
151
- setData(data);
152
- }
153
-
154
- function handleClose() {
155
- console.log("LOG", "close");
156
- setName(null);
157
- setData(initialData);
158
- }
159
-
160
- bottomModal.addEventListener(constants.OPEN, handleOpenModal);
161
- bottomModal.addEventListener(constants.CLOSE, handleClose);
162
-
163
- return () => {
164
- bottomModal.removeEventListener(constants.OPEN, handleOpenModal);
165
- bottomModal.removeEventListener(constants.CLOSE, handleClose);
166
- };
167
- }, []);
168
-
169
- const handleCloseModal = (e: any) => {
170
- if (modalRef.current && !modalRef.current.contains(e.target)) {
171
- console.log("LOG", "close");
172
- bottomModal.close();
173
- }
174
- };
175
-
176
- const Widget = widgets[name];
177
-
178
- return (
179
- <>
180
- {name && Widget && (
181
- <div
182
- onClick={handleCloseModal}
183
- className="animate-backdrop fixed z-[1000] h-full w-full overflow-hidden flex items-end"
184
- >
185
- <div className="animate-fromBottom w-full" ref={modalRef}>
186
- <Widget {...data.data} />
187
- </div>
188
- </div>
189
- )}
190
- </>
191
- );
192
- };
193
-
194
- export default memo(BottomModalProvider);
195
- ```
196
-
197
- ### index.js
198
-
199
- ```javascript
200
- import React from "react";
201
- import ReactDOM from "react-dom/client";
202
- import "./index.css";
203
- import App from "./App";
204
- import ModalPrompts from "./modals/prompt";
205
- import { ModalProvider } from "@4i/modal-manager";
206
- import "@4i/modal-manager/src/styles.css";
207
-
208
- const root = ReactDOM.createRoot(document.getElementById("root"));
209
-
210
- // Define your modal actions here
211
- export const modalAction = {
212
- MODAL_PROMPT: "modal-prompt",
213
- };
214
-
215
- // Your modal list should be an object with modal names
216
- // as keys and modal components as values.
217
- const list = {
218
- [modalAction.MODAL_PROMPT]: ModalPrompts,
219
- };
220
-
221
- root.render(
222
- <React.StrictMode>
223
- <App />
224
- <ModalProvider modalList={list} />
225
- </React.StrictMode>
226
- );
227
- ```
228
-
229
- ### App.js
230
-
231
- ```javascript
232
- import { modalAction } from ".";
233
- import "./App.css";
234
- import { modal } from "@4i/modal-manager";
235
-
236
- const App = () => {
237
- const handleClick = () => {
238
- // Call the modal by its action name
239
- modal.call(modalAction.MODAL_PROMPT, {
240
- // You can pass any props to your modal component
241
- title: "Modal title",
242
- content: "Modal content",
243
- });
244
- };
245
-
246
- return (
247
- <div className="app">
248
- <button
249
- onClick={handleClick}
250
- className="w-[200px] h-[80px] mx-auto bg-teal-800 text-white"
251
- >
252
- Click to call modal
253
- </button>
254
- </div>
255
- );
256
- };
257
-
258
- export default App;
259
- ```
260
-
261
- ### ModalPrompts.js
262
-
263
- ```javascript
264
- import React from "react";
265
- import { modal } from "@4i/modal-manager";
266
-
267
- // Get props
268
- const ModalPrompts = ({ title, content }) => {
269
- const handleClose = () => {
270
- modal.close();
271
- };
272
-
273
- return (
274
- <div className="w-[400px] h-[300px] bg-slate-50 p-[24px] flex flex-col justify-center items-center">
275
- <h1>{title}</h1>
276
- <p>{content}</p>
277
- <button onClick={handleClose}>Close</button>
278
- </div>
279
- );
280
- };
281
-
282
- export default ModalPrompts;
283
- ```
284
-
285
- Feel free to tailor this documentation to better fit your package's specific features and capabilities.
1
+ # Modal manager
2
+
3
+ [![npm version](https://badge.fury.io/js/%404i%2Fmodal-manager.svg)](https://badge.fury.io/js/%404i%2Fmodal-manager)
4
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
5
+
6
+ Usage in Managing Multiple Modals, Popups, Notifications
7
+
8
+ This package simplifies the management of multiple modals, popups, notifications, and similar UI elements within a project. It achieves this by leveraging events, maintaining a centralized list of modals, and assigning actions to them.
9
+
10
+ ## Installation
11
+
12
+ ```bash
13
+ npm install @4i/modal-manager
14
+ ```
15
+
16
+ ## Example
17
+
18
+ <a href="https://codesandbox.io/p/github/tonichiga/modal-manager-example/main?layout=%257B%2522sidebarPanel%2522%253A%2522GIT%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clsnqfzod00063p6le9554u03%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clsnqfzod00023p6lo9e5ocrg%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clsnqfzod00043p6l5kpjziav%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clsnqfzod00053p6lleknh8sj%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clsnqfzod00023p6lo9e5ocrg%2522%253A%257B%2522id%2522%253A%2522clsnqfzod00023p6lo9e5ocrg%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522clsnqfzod00053p6lleknh8sj%2522%253A%257B%2522id%2522%253A%2522clsnqfzod00053p6lleknh8sj%2522%252C%2522activeTabId%2522%253A%2522clsnqihgr00ht3p6l2nn59nq5%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522clsnqihgr00ht3p6l2nn59nq5%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clsnqfzod00043p6l5kpjziav%2522%253A%257B%2522id%2522%253A%2522clsnqfzod00043p6l5kpjziav%2522%252C%2522activeTabId%2522%253A%2522clsnqojb3003j3p6m98yg0rzn%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clsnqh362007k3p6lgb90p583%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522id%2522%253A%2522clsnqojb3003j3p6m98yg0rzn%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clsnqojh1001mdjig37kbat9k%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D">Codesandbox</a>
19
+
20
+ ## Usage
21
+
22
+ #### Instance methods:
23
+
24
+ | Method | Description |
25
+ | ------------------------------------ | ----------------------------------------------------- |
26
+ | call(action, props) | Call a modal by its action name and pass props to it. |
27
+ | |
28
+ | close('all') | Close all modals. |
29
+ | |
30
+ | close(-1) | Close last modals. |
31
+ | |
32
+ | close(0) | Close first modals. |
33
+ | |
34
+ | close() | Close last modals. (default) |
35
+ | |
36
+ | onOpenModalState(callback) | Is there at least one window open now |
37
+ | |
38
+ | addEventListener(event, callback) | Add an event listener to the modal manager. |
39
+ | |
40
+ | removeEventListener(event, callback) | Remove an event listener from the modal manager. |
41
+ | |
42
+
43
+ #### ModalProvider props
44
+
45
+ | Prop | Type | Description |
46
+ | ------------------ | -------- | -------------------------------------------------------------------------- |
47
+ | modalList | Object | An object containing modal actions as keys and modal components as values. |
48
+ | className | string | |
49
+ | isOverflow | boolean | Set "overflow: hidden" on body |
50
+ | onModalStateChange | function | Callback function that is called when modal state changes. |
51
+
52
+ #### Define Modal Actions:
53
+
54
+ In your project, define modal actions as keys in the modalAction object. Each key represents a specific modal or UI element.
55
+
56
+ ```javascript
57
+ export const modalAction = {
58
+ MODAL_PROMPT: "modal-prompt",
59
+ // Additional modal actions...
60
+ };
61
+ ```
62
+
63
+ #### Create Modal List:
64
+
65
+ Create a list of modals in the list object, where keys are modal actions, and values are the corresponding modal components.
66
+
67
+ ```javascript
68
+ const list = {
69
+ [modalAction.MODAL_PROMPT]: ModalPrompts,
70
+ // Additional modals...
71
+ };
72
+ ```
73
+
74
+ #### Call modals
75
+
76
+ Call modals in your components by invoking modal.call with the desired modal action.
77
+
78
+ ```javascript
79
+ modal.call(modalAction.MODAL_PROMPT, {
80
+ // Recieve props in your modal component
81
+ title: "Modal title",
82
+ content: "Modal content",
83
+ });
84
+ ```
85
+
86
+ #### Extensibility
87
+
88
+ If desired, you can inherit from the Manager class to create your own classes for handling custom notifications, popups, and more. And then pass your custom class to the CustomProvider component using ModalProvider as an example
89
+
90
+ ```javascript
91
+ import { Manager } from "@4i/modal-manager";
92
+
93
+ import { Manager } from "@4i/modal-manager";
94
+ import { v4 as uuidv4 } from "uuid";
95
+
96
+ export const constants = {
97
+ OPEN: "open-bottom-modal",
98
+ CLOSE: "close-bottom-modal",
99
+ };
100
+
101
+ class CustomModalManager extends Manager {
102
+ name: string;
103
+ data: any;
104
+
105
+ constructor() {
106
+ super();
107
+ this.name = "";
108
+ this.data = {};
109
+ }
110
+
111
+ create(name: string, data) {
112
+ this.name = name;
113
+ this.data = data;
114
+ this.emitter.emit(constants.OPEN, this.name, this.data);
115
+ }
116
+
117
+ call(name: string, data: any = {}) {
118
+ this.create(name, { modalId: uuidv4(), data });
119
+ }
120
+
121
+ close(position?: number | string) {
122
+ this.emitter.emit(constants.CLOSE, position);
123
+ }
124
+ }
125
+
126
+ const customModalManager = new CustomModalManager();
127
+
128
+ export default customModalManager;
129
+ ```
130
+
131
+ #### Custom Provider
132
+
133
+ ```javascript
134
+ import { memo, useEffect, useRef, useState } from "react";
135
+ import bottomModal, { constants } from "../../service/BottomModal";
136
+ import widgets from "../../config/modal/modal-list";
137
+
138
+ const initialData = {
139
+ data: null,
140
+ };
141
+
142
+ const BottomModalProvider = () => {
143
+ const [data, setData] = useState(initialData);
144
+ const [name, setName] = useState < string > null;
145
+ const modalRef = useRef < HTMLDivElement > null;
146
+
147
+ useEffect(() => {
148
+ function handleOpenModal(name, data) {
149
+ console.log("LOG", name);
150
+ setName(name);
151
+ setData(data);
152
+ }
153
+
154
+ function handleClose() {
155
+ console.log("LOG", "close");
156
+ setName(null);
157
+ setData(initialData);
158
+ }
159
+
160
+ bottomModal.addEventListener(constants.OPEN, handleOpenModal);
161
+ bottomModal.addEventListener(constants.CLOSE, handleClose);
162
+
163
+ return () => {
164
+ bottomModal.removeEventListener(constants.OPEN, handleOpenModal);
165
+ bottomModal.removeEventListener(constants.CLOSE, handleClose);
166
+ };
167
+ }, []);
168
+
169
+ const handleCloseModal = (e: any) => {
170
+ if (modalRef.current && !modalRef.current.contains(e.target)) {
171
+ console.log("LOG", "close");
172
+ bottomModal.close();
173
+ }
174
+ };
175
+
176
+ const Widget = widgets[name];
177
+
178
+ return (
179
+ <>
180
+ {name && Widget && (
181
+ <div
182
+ onClick={handleCloseModal}
183
+ className="animate-backdrop fixed z-[1000] h-full w-full overflow-hidden flex items-end"
184
+ >
185
+ <div className="animate-fromBottom w-full" ref={modalRef}>
186
+ <Widget {...data.data} />
187
+ </div>
188
+ </div>
189
+ )}
190
+ </>
191
+ );
192
+ };
193
+
194
+ export default memo(BottomModalProvider);
195
+ ```
196
+
197
+ ### index.js
198
+
199
+ ```javascript
200
+ import React from "react";
201
+ import ReactDOM from "react-dom/client";
202
+ import "./index.css";
203
+ import App from "./App";
204
+ import ModalPrompts from "./modals/prompt";
205
+ import { ModalProvider } from "@4i/modal-manager";
206
+ import "@4i/modal-manager/src/styles.css";
207
+
208
+ const root = ReactDOM.createRoot(document.getElementById("root"));
209
+
210
+ // Define your modal actions here
211
+ export const modalAction = {
212
+ MODAL_PROMPT: "modal-prompt",
213
+ };
214
+
215
+ // Your modal list should be an object with modal names
216
+ // as keys and modal components as values.
217
+ const list = {
218
+ [modalAction.MODAL_PROMPT]: ModalPrompts,
219
+ };
220
+
221
+ root.render(
222
+ <React.StrictMode>
223
+ <App />
224
+ <ModalProvider modalList={list} />
225
+ </React.StrictMode>
226
+ );
227
+ ```
228
+
229
+ ### App.js
230
+
231
+ ```javascript
232
+ import { modalAction } from ".";
233
+ import "./App.css";
234
+ import { modal } from "@4i/modal-manager";
235
+
236
+ const App = () => {
237
+ const handleClick = () => {
238
+ // Call the modal by its action name
239
+ modal.call(modalAction.MODAL_PROMPT, {
240
+ // You can pass any props to your modal component
241
+ title: "Modal title",
242
+ content: "Modal content",
243
+ });
244
+ };
245
+
246
+ return (
247
+ <div className="app">
248
+ <button
249
+ onClick={handleClick}
250
+ className="w-[200px] h-[80px] mx-auto bg-teal-800 text-white"
251
+ >
252
+ Click to call modal
253
+ </button>
254
+ </div>
255
+ );
256
+ };
257
+
258
+ export default App;
259
+ ```
260
+
261
+ ### ModalPrompts.js
262
+
263
+ ```javascript
264
+ import React from "react";
265
+ import { modal } from "@4i/modal-manager";
266
+
267
+ // Get props
268
+ const ModalPrompts = ({ title, content }) => {
269
+ const handleClose = () => {
270
+ modal.close();
271
+ };
272
+
273
+ return (
274
+ <div className="w-[400px] h-[300px] bg-slate-50 p-[24px] flex flex-col justify-center items-center">
275
+ <h1>{title}</h1>
276
+ <p>{content}</p>
277
+ <button onClick={handleClose}>Close</button>
278
+ </div>
279
+ );
280
+ };
281
+
282
+ export default ModalPrompts;
283
+ ```
284
+
285
+ Feel free to tailor this documentation to better fit your package's specific features and capabilities.