react-flow-modal 0.4.1 → 0.6.0

package/README.md

@@ -22,7 +22,9 @@ yarn add react-flow-modal
 ## Basic Usage
 
 ```tsx
-import { ModalProvider, useModal, renderModals } from "react-flow-modal";
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { ModalProvider, useModal, ModalHost } from "react-flow-modal";
 
 function ConfirmModal({
   onConfirm,
@@ -66,6 +68,7 @@ function App() {
   const modal = useModal();
 
   const onClick = async () => {
+    // render modal and await resolve
     const result = await modal.open("confirm", (resolve) => (
       <ConfirmModal
         onConfirm={() => resolve(true)}
@@ -73,24 +76,22 @@ function App() {
       />
     ));
 
+    // flow resumed
     console.log("Result:", result);
   };
 
   return <button onClick={onClick}>Open Confirm Modal</button>;
 }
 
-function ModalRenderer() {
-  return renderModals();
-}
-
-export default function Root() {
-  return (
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
     <ModalProvider>
       <App />
-      <ModalRenderer />
+      <ModalHost />
     </ModalProvider>
-  );
-}
+  </StrictMode>,
+)
+
 ```
 
 ---
@@ -101,8 +102,10 @@ To support exit animations, modals must be rendered inside the same
 React tree as `AnimatePresence`.
 
 ```tsx
-import { ModalProvider, useModal, renderModals } from "react-flow-modal";
-import { motion, AnimatePresence } from "motion/react";
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { ModalHost, ModalProvider } from 'react-flow-modal';
+import { AnimatePresence, motion } from 'motion/react';
 
 function ConfirmModal({
   onConfirm,
@@ -113,7 +116,7 @@ function ConfirmModal({
 }) {
   return (
     <motion.div
-      key="modal"
+      key="confirm-modal-container"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
@@ -127,7 +130,6 @@ function ConfirmModal({
       }}
     >
       <motion.div
-        key="modal-content"
         initial={{ scale: 0.9, opacity: 0 }}
         animate={{ scale: 1, opacity: 1 }}
         exit={{ scale: 0.95, opacity: 0 }}
@@ -137,6 +139,7 @@ function ConfirmModal({
           padding: 24,
           borderRadius: 8,
           minWidth: 300,
+          color: "black",
         }}
       >
         <h3>Are you sure?</h3>
@@ -151,39 +154,24 @@ function ConfirmModal({
   );
 }
 
-function App() {
-  const modal = useModal();
-
-  const onClick = async () => {
-    const result = await modal.open("confirm", (resolve) => (
-      <ConfirmModal
-        onConfirm={() => resolve(true)}
-        onCancel={() => resolve(false)}
-      />
-    ));
-
-    console.log("Result:", result);
-  };
-
-  return <button onClick={onClick}>Open Confirm Modal</button>;
-}
-
-function ModalRenderer() {
-  return (
-    <AnimatePresence>
-      {renderModals()}
-    </AnimatePresence>
-  );
-}
+...
 
-export default function Root() {
-  return (
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
     <ModalProvider>
       <App />
-      <ModalRenderer />
+      <ModalHost>
+        {(modals) => (
+          <AnimatePresence>
+            {modals}
+          </AnimatePresence>
+        )}
+      </ModalHost>
     </ModalProvider>
-  );
-}
+  </StrictMode>,
+)
+
+
 ```
 
 ---
@@ -210,11 +198,13 @@ Returns an object that controls the modal flow.
 }
 ```
 
-### renderModals
+### ModalHost
 ```ts
-renderModals(): React.ReactNode
+const ModalHost: FC<{
+    children?: (modals: ReactElement[]) => React.ReactNode;
+}>;
 ```
-Renders the entire modal stack. This function should be rendered **once** in your React tree.
+Renders the entire modal stack. This component should be rendered **once** in your React tree.
 
 ---
 
@@ -223,9 +213,6 @@ Renders the entire modal stack. This function should be rendered **once** in you
 > ⚠️ Always resolve or reject the promise.
 > Leaving it pending will block the async flow.
 
-> ⚠️ `renderModals()` should be rendered once.
-> Rendering it multiple times may result in duplicated modals.
-
 ---
 
 ## Why react-flow-modal?

package/dist/index.cjs

@@ -22,79 +22,73 @@ var index_exports = {};
 __export(index_exports, {
   ModalHost: () => ModalHost,
   ModalProvider: () => ModalProvider,
-  useModal: () => useModal,
-  useModalHost: () => useModalHost
+  useModal: () => useModal
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/ModalProvider.tsx
-var import_react2 = require("react");
-
-// src/modalContext.ts
 var import_react = require("react");
-var ModalContext = (0, import_react.createContext)({
-  stack: [],
-  setStack: () => []
-});
-
-// src/ModalProvider.tsx
+var import_zustand = require("zustand");
 var import_jsx_runtime = require("react/jsx-runtime");
-var ModalProvider = ({ children }) => {
-  const [stack, setStack] = (0, import_react2.useState)([]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalContext.Provider, { value: { stack, setStack }, children });
-};
-
-// src/useModalContext.ts
-var import_react3 = require("react");
-var useModalContext = () => {
-  const context = (0, import_react3.useContext)(ModalContext);
-  if (!context) {
-    throw new Error("useModalContext must be used within a ModalProvider");
-  }
-  return context;
-};
-var useModalHost = () => {
-  const { stack } = useModalContext();
+var createModalStore = (initialState) => (0, import_zustand.createStore)((set) => {
+  var _a;
   return {
-    render: () => stack.map((item) => item)
+    stack: (_a = initialState == null ? void 0 : initialState.stack) != null ? _a : /* @__PURE__ */ new Map(),
+    appendStack: (key, element) => set((state) => ({ stack: new Map(state.stack).set(key, element) })),
+    removeStack: (key) => set((state) => {
+      const newStack = new Map(state.stack);
+      newStack.delete(key);
+      return { stack: newStack };
+    })
   };
+});
+var ModalStoreContext = (0, import_react.createContext)(null);
+var ModalProvider = ({ children, initialState }) => {
+  const [store] = (0, import_react.useState)(createModalStore(initialState));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalStoreContext.Provider, { value: store, children });
+};
+var useModalStore = (selector) => {
+  const store = (0, import_react.useContext)(ModalStoreContext);
+  if (!store) throw new Error("DashboardStoreProvider missing");
+  return (0, import_zustand.useStore)(store, selector);
 };
 
 // src/useModal.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var useModal = () => {
-  const { setStack } = useModalContext();
-  const pop = () => {
-    setStack((prev) => prev.slice(0, -1));
-  };
-  const push = (element) => {
-    setStack((prev) => [...prev, element]);
-  };
+  const appendStack = useModalStore(
+    (state) => state.appendStack
+  );
+  const removeStack = useModalStore(
+    (state) => state.removeStack
+  );
   const open = (key, render) => {
     return new Promise((resolve, reject) => {
       const element = render((value) => {
         resolve(value);
-        pop();
+        removeStack(key);
       }, (reason) => {
         reject(reason);
-        pop();
+        removeStack(key);
       });
-      push(element);
+      appendStack(key, /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Fragment, { children: element }, `modal-${key}`));
     });
   };
   return { open };
 };
 
 // src/ModalHost.tsx
-var import_react4 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ModalHost = () => {
-  const { render } = useModalHost();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Fragment, { children: render() });
+var ModalHost = ({ children }) => {
+  const stack = useModalStore(
+    (state) => state.stack
+  );
+  if (!children) return Array.from(stack.values());
+  return children(Array.from(stack.values()));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ModalHost,
   ModalProvider,
-  useModal,
-  useModalHost
+  useModal
 });

package/dist/index.d.cts

@@ -1,17 +1,21 @@
-import * as react from 'react';
-import react__default, { FC, PropsWithChildren } from 'react';
+import React$1, { PropsWithChildren, ReactElement, FC } from 'react';
 
-declare const ModalProvider: FC<PropsWithChildren>;
+type ModalState = {
+    stack: Map<string, ReactElement>;
+    appendStack: (key: string, element: ReactElement) => void;
+    removeStack: (key: string) => void;
+};
+type ProviderProps = {
+    initialState?: Partial<ModalState>;
+};
+declare const ModalProvider: React$1.FC<PropsWithChildren<ProviderProps>>;
 
 declare const useModal: () => {
-    open: <T>(key: string, render: (resolve: (value: T) => void, reject: (reason?: unknown) => void) => react__default.ReactNode) => Promise<T>;
+    open: <T>(key: string, render: (resolve: (value: T) => void, reject: (reason?: unknown) => void) => React$1.ReactNode) => Promise<T>;
 };
 
-/** @deprecated use renderModals instead */
-declare const ModalHost: FC;
-
-declare const useModalHost: () => {
-    render: () => react.ReactNode[];
-};
+declare const ModalHost: FC<{
+    children?: (modals: ReactElement[]) => React.ReactNode;
+}>;
 
-export { ModalHost, ModalProvider, useModal, useModalHost };
+export { ModalHost, ModalProvider, useModal };

package/dist/index.d.ts

@@ -1,17 +1,21 @@
-import * as react from 'react';
-import react__default, { FC, PropsWithChildren } from 'react';
+import React$1, { PropsWithChildren, ReactElement, FC } from 'react';
 
-declare const ModalProvider: FC<PropsWithChildren>;
+type ModalState = {
+    stack: Map<string, ReactElement>;
+    appendStack: (key: string, element: ReactElement) => void;
+    removeStack: (key: string) => void;
+};
+type ProviderProps = {
+    initialState?: Partial<ModalState>;
+};
+declare const ModalProvider: React$1.FC<PropsWithChildren<ProviderProps>>;
 
 declare const useModal: () => {
-    open: <T>(key: string, render: (resolve: (value: T) => void, reject: (reason?: unknown) => void) => react__default.ReactNode) => Promise<T>;
+    open: <T>(key: string, render: (resolve: (value: T) => void, reject: (reason?: unknown) => void) => React$1.ReactNode) => Promise<T>;
 };
 
-/** @deprecated use renderModals instead */
-declare const ModalHost: FC;
-
-declare const useModalHost: () => {
-    render: () => react.ReactNode[];
-};
+declare const ModalHost: FC<{
+    children?: (modals: ReactElement[]) => React.ReactNode;
+}>;
 
-export { ModalHost, ModalProvider, useModal, useModalHost };
+export { ModalHost, ModalProvider, useModal };

package/dist/index.js

@@ -1,70 +1,65 @@
 // src/ModalProvider.tsx
-import { useState } from "react";
-
-// src/modalContext.ts
-import { createContext } from "react";
-var ModalContext = createContext({
-  stack: [],
-  setStack: () => []
-});
-
-// src/ModalProvider.tsx
+import { createContext, useContext, useState } from "react";
+import { createStore, useStore } from "zustand";
 import { jsx } from "react/jsx-runtime";
-var ModalProvider = ({ children }) => {
-  const [stack, setStack] = useState([]);
-  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: { stack, setStack }, children });
-};
-
-// src/useModalContext.ts
-import { useContext } from "react";
-var useModalContext = () => {
-  const context = useContext(ModalContext);
-  if (!context) {
-    throw new Error("useModalContext must be used within a ModalProvider");
-  }
-  return context;
-};
-var useModalHost = () => {
-  const { stack } = useModalContext();
+var createModalStore = (initialState) => createStore((set) => {
+  var _a;
   return {
-    render: () => stack.map((item) => item)
+    stack: (_a = initialState == null ? void 0 : initialState.stack) != null ? _a : /* @__PURE__ */ new Map(),
+    appendStack: (key, element) => set((state) => ({ stack: new Map(state.stack).set(key, element) })),
+    removeStack: (key) => set((state) => {
+      const newStack = new Map(state.stack);
+      newStack.delete(key);
+      return { stack: newStack };
+    })
   };
+});
+var ModalStoreContext = createContext(null);
+var ModalProvider = ({ children, initialState }) => {
+  const [store] = useState(createModalStore(initialState));
+  return /* @__PURE__ */ jsx(ModalStoreContext.Provider, { value: store, children });
+};
+var useModalStore = (selector) => {
+  const store = useContext(ModalStoreContext);
+  if (!store) throw new Error("DashboardStoreProvider missing");
+  return useStore(store, selector);
 };
 
 // src/useModal.tsx
+import { Fragment } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var useModal = () => {
-  const { setStack } = useModalContext();
-  const pop = () => {
-    setStack((prev) => prev.slice(0, -1));
-  };
-  const push = (element) => {
-    setStack((prev) => [...prev, element]);
-  };
+  const appendStack = useModalStore(
+    (state) => state.appendStack
+  );
+  const removeStack = useModalStore(
+    (state) => state.removeStack
+  );
   const open = (key, render) => {
     return new Promise((resolve, reject) => {
       const element = render((value) => {
         resolve(value);
-        pop();
+        removeStack(key);
       }, (reason) => {
         reject(reason);
-        pop();
+        removeStack(key);
       });
-      push(element);
+      appendStack(key, /* @__PURE__ */ jsx2(Fragment, { children: element }, `modal-${key}`));
     });
   };
   return { open };
 };
 
 // src/ModalHost.tsx
-import { Fragment } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ModalHost = () => {
-  const { render } = useModalHost();
-  return /* @__PURE__ */ jsx2(Fragment, { children: render() });
+var ModalHost = ({ children }) => {
+  const stack = useModalStore(
+    (state) => state.stack
+  );
+  if (!children) return Array.from(stack.values());
+  return children(Array.from(stack.values()));
 };
 export {
   ModalHost,
   ModalProvider,
-  useModal,
-  useModalHost
+  useModal
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-flow-modal",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "description": "Promise-based modal flows for React",
   "repository": {
     "type": "git",
@@ -39,5 +39,8 @@
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   },
-  "packageManager": "pnpm@10.27.0"
+  "packageManager": "pnpm@10.27.0",
+  "dependencies": {
+    "zustand": "^5.0.11"
+  }
 }

package/src/ModalHost.tsx

@@ -1,13 +1,13 @@
-import { FC, Fragment } from 'react';
-import { useModalHost } from './useModalContext';
+import { FC, isValidElement, ReactElement } from 'react';
+import { useModalStore } from './ModalProvider';
 
-/** @deprecated use renderModals instead */
-export const ModalHost: FC = () => {
-    const { render } = useModalHost();
 
-    return (
-        <Fragment>
-            {render()}
-        </Fragment>
+export const ModalHost: FC<{ children?: (modals: ReactElement[]) => React.ReactNode }> = ({ children }) => {
+    const stack = useModalStore(
+        (state) => state.stack
     );
+
+
+    if (!children) return Array.from(stack.values());
+    return children(Array.from(stack.values()));
 };

package/src/ModalProvider.tsx

@@ -1,12 +1,52 @@
-import React, { FC, PropsWithChildren, useState } from "react";
-import { ModalContext } from "./modalContext";
+'use client';
 
-export const ModalProvider: FC<PropsWithChildren> = ({ children }) => {
-    const [stack, setStack] = useState<React.ReactNode[]>([]);
+
+import React, { createContext, PropsWithChildren, ReactElement, useContext, useState } from 'react';
+import { createStore, ExtractState, StoreApi, useStore } from 'zustand';
+
+type ModalState = {
+    stack: Map<string, ReactElement>;
+    appendStack: (key: string, element: ReactElement) => void;
+    removeStack: (key: string) => void;
+};
+
+
+
+const createModalStore = (initialState?: Partial<ModalState>) => createStore<ModalState>((set) => {
+    return {
+        stack: initialState?.stack ?? new Map<string, ReactElement>(),
+
+        appendStack: (key: string, element: ReactElement) => set((state) => ({ stack: new Map(state.stack).set(key, element) })),
+
+        removeStack: (key: string) => set((state) => {
+            const newStack = new Map(state.stack);
+            newStack.delete(key);
+            return { stack: newStack };
+        }),
+    }
+});
+
+const ModalStoreContext = createContext<StoreApi<ModalState> | null>(null);
+
+type ProviderProps = {
+    initialState?: Partial<ModalState>;
+}
+
+
+export const ModalProvider: React.FC<PropsWithChildren<ProviderProps>> = ({ children, initialState }) => {
+    // 여러번 호출되어도 store가 하나만 생성되도록 함
+    const [store] = useState(createModalStore(initialState));
 
     return (
-        <ModalContext.Provider value={{ stack, setStack }}>
+        <ModalStoreContext.Provider value={store}>
             {children}
-        </ModalContext.Provider>
+        </ModalStoreContext.Provider>
     );
+};
+
+
+export const useModalStore = <T,>(selector: (state: ExtractState<StoreApi<ModalState>>) => T) => {
+    const store = useContext(ModalStoreContext);
+    if (!store) throw new Error('DashboardStoreProvider missing');
+    return useStore(store, selector);
 };

package/src/index.ts

@@ -1,4 +1,3 @@
 export { ModalProvider } from './ModalProvider';
 export { useModal } from './useModal';
-export { ModalHost } from './ModalHost';
-export { useModalHost } from './useModalContext';
+export { ModalHost } from './ModalHost';

package/src/useModal.tsx

@@ -1,16 +1,15 @@
 import React, { Fragment } from "react";
-import { useModalContext } from "./useModalContext";
+import { useModalStore } from "./ModalProvider";
 
 export const useModal = () => {
-    const { setStack } = useModalContext();
+    const appendStack = useModalStore(
+        (state) => state.appendStack
+    );
 
-    const pop = () => {
-        setStack((prev) => prev.slice(0, -1));
-    };
+    const removeStack = useModalStore(
+        (state) => state.removeStack
+    );
 
-    const push = (element: React.ReactNode) => {
-        setStack((prev) => [...prev, element]);
-    };
 
     /**
      * 모달을 열고 닫는 함수
@@ -24,12 +23,12 @@ export const useModal = () => {
         return new Promise<T>((resolve, reject) => {
             const element = render((value) => {
                 resolve(value);
-                pop();
+                removeStack(key);
             }, (reason) => {
                 reject(reason);
-                pop();
+                removeStack(key);
             });
-            push(element);
+            appendStack(key, <Fragment key={`modal-${key}`}>{element}</Fragment>);
         });
     };
 

package/src/modalContext.ts

@@ -1,9 +0,0 @@
-import { createContext, Dispatch, SetStateAction } from "react";
-
-export const ModalContext = createContext<{
-    stack: React.ReactNode[];
-    setStack: Dispatch<SetStateAction<React.ReactNode[]>>
-}>({
-    stack: [],
-    setStack: () => [] as React.ReactNode[],
-});

package/src/useModalContext.ts

@@ -1,20 +0,0 @@
-import { useContext } from "react";
-import { ModalContext } from "./modalContext";
-
-export const useModalContext = () => {
-    const context = useContext(ModalContext);
-
-    if (!context) {
-        throw new Error('useModalContext must be used within a ModalProvider');
-    }
-
-    return context;
-};
-
-export const useModalHost = () => {
-    const { stack } = useModalContext();
-
-    return {
-        render: () => stack.map((item) => (item)),
-    };
-};