@catconsult/simplify-modal-control - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

index.d.ts

@@ -57,2 +57,4 @@ import { ComponentType, Dispatch, SetStateAction, ReactNode, FC } from 'react';
     useModalContextSelector: <K_1 extends TContextModalsKey>(key: K_1) => TModalContextValue[K_1];
+    openModal: <K_2 extends TContextModalsKey>(key: K_2, newProps?: Parameters<TModalContextValue[K_2][0]>[0] | undefined) => void;
+    closeModal: <K_3 extends TContextModalsKey>(key: K_3) => void;
 };
@@ -59,0 +61,0 @@ export default makeModalControlSimpler;

index.js

@@ -154,3 +154,3 @@ "use strict";
      * Select a single modal open and close handler from global modal context
-     *
+     * @param key modal key
      * @example
@@ -169,2 +169,29 @@ * ```ts
     /**
+     * This section allows open/close context modals without using hook
+     */
+    let modalContextHandlersRef;
+    /**
+     * Open modal without using hooks
+     * @param key modal key
+     * @param newProps modal props
+     * @example
+     * ```ts
+     * openModal("fooModal", {fooProp:"pass in props to the modal"});
+     * ```
+     */
+    const openModal = (key, newProps) => {
+        modalContextHandlersRef === null || modalContextHandlersRef === void 0 ? void 0 : modalContextHandlersRef[key][0](newProps);
+    };
+    /**
+     * Close modal without using hooks
+     * @param key modal key
+     * @example
+     * ```ts
+     * closeModal("fooModal");
+     * ```
+     */
+    const closeModal = (key) => {
+        modalContextHandlersRef === null || modalContextHandlersRef === void 0 ? void 0 : modalContextHandlersRef[key][1]();
+    };
+    /**
      * A global context provider to store reusable modals
@@ -186,7 +213,7 @@ * Consumer can open, close, pass props to any modals using context value handlers.
         // context value will be map of handlers. Only need to initialize once
-        const contextValue = (0, react_1.useMemo)(() => Object.entries(modals).reduce((acc, [key, [_, ...handlers]]) => {
+        const contextValue = (0, react_1.useMemo)(() => (modalContextHandlersRef = Object.entries(modals).reduce((acc, [key, [_, ...handlers]]) => {
             acc[key] =
                 handlers;
             return acc;
-        }, {}), 
+        }, {})), 
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -201,2 +228,4 @@ []);
         useModalContextSelector,
+        openModal,
+        closeModal,
     };
@@ -203,0 +232,0 @@ };

package.json

 {
   "name": "@catconsult/simplify-modal-control",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Simplify React modal control flow",
@@ -5,0 +5,0 @@ "main": "./index.js",

README.md

@@ -47,4 +47,4 @@ [![npm version](https://badge.fury.io/js/@catconsult%2Fsimplify-modal-control.svg)](https://badge.fury.io/js/@catconsult%2Fsimplify-modal-control)
 // use MUI Dialog as Example, choose you favorite component wrapper
-import { Dialog, DialogContent } from "@mui/material";
-import makeModalControlSimpler from "@catconsult/simplify-modal-control";
+import { Dialog, DialogContent } from '@mui/material';
+import makeModalControlSimpler from '@catconsult/simplify-modal-control';
 
@@ -74,2 +74,4 @@ // define your modal
   ModalContextProvider,
+  openModal,
+  closeModal,
 } = makeModalControlSimpler({
@@ -84,3 +86,4 @@ ModalWrapper: Dialog,
   // define your global modals
-  useContextModals: (useModal) => ({
+  useContextModals: useModal => ({
+    myModal0: useModal(MyModal),
     myModal1: useModal(MyModal),
@@ -90,3 +93,3 @@ myModal2: useModal(MyModal, {
         // pass props to modal wrapper
-        maxWidth: "xs",
+        maxWidth: 'xs',
       },
@@ -96,3 +99,3 @@ }),
       // pass default props to modal content
-      defaultProps: { customMessage: "something" },
+      defaultProps: { customMessage: 'something' },
     }),
@@ -106,3 +109,3 @@ }),
   const [handleOpenMyModal1, handleCloseMyModal1] =
-    useModalContextSelector("myModal1");
+    useModalContextSelector('myModal1');
 
@@ -123,8 +126,8 @@ // select multiple from global context
         onClick={() => {
-          handleOpenMyModal1({ customMessage: "modal1" });
-          handleOpenMyModal2({ customMessage: "modal2" });
-          handleOpenMyModal3({ customMessage: "modal3" });
-          handleOpenMyModal4({ customMessage: "modal4" });
-        }}
-      >
+          openModal('modal0', { customMessage: 'modal0' });
+          handleOpenMyModal1({ customMessage: 'modal1' });
+          handleOpenMyModal2({ customMessage: 'modal2' });
+          handleOpenMyModal3({ customMessage: 'modal3' });
+          handleOpenMyModal4({ customMessage: 'modal4' });
+        }}>
         Open
@@ -135,2 +138,10 @@ </button>
 };
+
+export const App = () => {
+  return (
+    <ModalContextProvider>
+      <MyConsumer />
+    </ModalContextProvider>
+  );
+};
 ```
@@ -140,5 +151,3 @@
 
-TODO: add CodePen link and demo
-
-- `MUI Dialog` example with custom way to disable backdrop click
+- [`React` + `MUI Dialog`](https://codesandbox.io/s/objective-agnesi-wercyl?file=/src/App.tsx)
 - [React Native `react-native-modalize`](https://snack.expo.dev/@dhananjay.soneji/catalyst-simplify-modal-control?platform=android)
@@ -165,2 +174,31 @@
 
+## openModal
+
+````ts
+/**
+ * Open modal without using hooks
+ * @param key modal key
+ * @param newProps modal props
+ * @example
+ * ```ts
+ * openModal("fooModal", {fooProp:"pass in props to the modal"});
+ * ```
+ */
+openModal(key, newProps);
+````
+
+## closeModal
+
+````ts
+/**
+ * Open modal without using hooks
+ * @param key modal key
+ * @example
+ * ```ts
+ * openModal("fooModal", {fooProp:"pass in props to the modal"});
+ * ```
+ */
+closeModal(key);
+````
+
 ## useModal
@@ -167,0 +205,0 @@

No alert changes

Improved metrics

Total package byte prevSize

26262

increased by9.17%

Lines of code

330

increased by10.37%

Number of lines in readme file

256

increased by17.43%

No dependency changes