@4i/modal-manager 1.0.101 → 1.0.112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4i/modal-manager",
-  "version": "1.0.101",
+  "version": "1.0.112",
   "description": "",
   "main": "src/index.ts",
   "scripts": {
@@ -22,10 +22,7 @@
     "url": "https://github.com/tonichiga/modal-manager/issues"
   },
   "homepage": "https://github.com/tonichiga/modal-manager#readme",
-  "dependencies": {
-    "react": "^18.2.0",
-    "uuid": "^9.0.1"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@babel/cli": "^7.23.4",
     "@babel/core": "^7.23.5",

package/readme.md

@@ -15,6 +15,16 @@ npm install @4i/modal-manager
 
 ## Usage
 
+#### Instance methods:
+
+##### .call(action, props)
+
+Call a modal by its action name and pass props to it.
+
+##### .close()
+
+Close all modals.
+
 #### Define Modal Actions:
 
 In your project, define modal actions as keys in the modalAction object. Each key represents a specific modal or UI element.
@@ -131,14 +141,19 @@ export default App;
 
 ```javascript
 import React from "react";
+import { modal } from "@4i/modal-manager";
 
 // Get props
 const ModalPrompts = ({ title, content }) => {
+  const handleClose = () => {
+    modal.close();
+  };
+
   return (
     <div className="w-[400px] h-[300px] bg-slate-50 p-[24px] flex flex-col justify-center items-center">
       <h1>{title}</h1>
       <p>{content}</p>
-      <button>Close</button>
+      <button onClick={handleClose}>Close</button>
     </div>
   );
 };

package/src/utils/ModalManager.ts

@@ -1,5 +1,8 @@
 import Manager from "./Manager";
-import { v4 as uuidv4 } from "uuid";
+
+function uniqueID() {
+  return Math.floor(Math.random() * Date.now());
+}
 
 const constants = {
   CHANGE: "change",
@@ -18,7 +21,7 @@ class ModalManager extends Manager {
   }
 
   call(name: string, data: any = {}) {
-    this.create(name, { modalId: uuidv4(), data });
+    this.create(name, { modalId: uniqueID(), data });
   }
 
   close<T>(position?: T) {