react-flow-modal 0.4.0 → 0.5.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,6 +116,7 @@ function ConfirmModal({
 }) {
   return (
     <motion.div
+      key="confirm-modal-container"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
@@ -135,6 +139,7 @@ function ConfirmModal({
           padding: 24,
           borderRadius: 8,
           minWidth: 300,
+          color: "black",
         }}
       >
         <h3>Are you sure?</h3>
@@ -149,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>,
+)
+
+
 ```
 
 ---
@@ -208,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.
 
 ---
 
@@ -221,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,7 +22,6 @@ var index_exports = {};
 __export(index_exports, {
   ModalHost: () => ModalHost,
   ModalProvider: () => ModalProvider,
-  renderModals: () => renderModals,
   useModal: () => useModal
 });
 module.exports = __toCommonJS(index_exports);
@@ -44,6 +43,9 @@ var ModalProvider = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalContext.Provider, { value: { stack, setStack }, children });
 };
 
+// src/useModal.tsx
+var import_react4 = require("react");
+
 // src/useModalContext.ts
 var import_react3 = require("react");
 var useModalContext = () => {
@@ -53,12 +55,9 @@ var useModalContext = () => {
   }
   return context;
 };
-var renderModals = () => {
-  const { stack } = useModalContext();
-  return stack.map((item) => item);
-};
 
 // src/useModal.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var useModal = () => {
   const { setStack } = useModalContext();
   const pop = () => {
@@ -76,23 +75,22 @@ var useModal = () => {
         reject(reason);
         pop();
       });
-      push(element);
+      push(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.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 = () => {
+var import_react5 = require("react");
+var ModalHost = ({ children }) => {
   const { stack } = useModalContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Fragment, { children: stack.map((item) => item) });
+  if (!children) return stack.filter(import_react5.isValidElement);
+  return children(stack.filter(import_react5.isValidElement));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ModalHost,
   ModalProvider,
-  renderModals,
   useModal
 });

package/dist/index.d.cts

@@ -1,15 +1,13 @@
-import * as react from 'react';
-import react__default, { FC, PropsWithChildren } from 'react';
+import React$1, { FC, PropsWithChildren, ReactElement } from 'react';
 
 declare const ModalProvider: FC<PropsWithChildren>;
 
 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 ModalHost: FC<{
+    children?: (modals: ReactElement[]) => React.ReactNode;
+}>;
 
-declare const renderModals: () => react.ReactNode[];
-
-export { ModalHost, ModalProvider, renderModals, useModal };
+export { ModalHost, ModalProvider, useModal };

package/dist/index.d.ts

@@ -1,15 +1,13 @@
-import * as react from 'react';
-import react__default, { FC, PropsWithChildren } from 'react';
+import React$1, { FC, PropsWithChildren, ReactElement } from 'react';
 
 declare const ModalProvider: FC<PropsWithChildren>;
 
 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 ModalHost: FC<{
+    children?: (modals: ReactElement[]) => React.ReactNode;
+}>;
 
-declare const renderModals: () => react.ReactNode[];
-
-export { ModalHost, ModalProvider, renderModals, useModal };
+export { ModalHost, ModalProvider, useModal };

package/dist/index.js

@@ -15,6 +15,9 @@ var ModalProvider = ({ children }) => {
   return /* @__PURE__ */ jsx(ModalContext.Provider, { value: { stack, setStack }, children });
 };
 
+// src/useModal.tsx
+import { Fragment } from "react";
+
 // src/useModalContext.ts
 import { useContext } from "react";
 var useModalContext = () => {
@@ -24,12 +27,9 @@ var useModalContext = () => {
   }
   return context;
 };
-var renderModals = () => {
-  const { stack } = useModalContext();
-  return stack.map((item) => item);
-};
 
 // src/useModal.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
 var useModal = () => {
   const { setStack } = useModalContext();
   const pop = () => {
@@ -47,22 +47,21 @@ var useModal = () => {
         reject(reason);
         pop();
       });
-      push(element);
+      push(/* @__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 = () => {
+import { isValidElement } from "react";
+var ModalHost = ({ children }) => {
   const { stack } = useModalContext();
-  return /* @__PURE__ */ jsx2(Fragment, { children: stack.map((item) => item) });
+  if (!children) return stack.filter(isValidElement);
+  return children(stack.filter(isValidElement));
 };
 export {
   ModalHost,
   ModalProvider,
-  renderModals,
   useModal
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-flow-modal",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Promise-based modal flows for React",
   "repository": {
     "type": "git",

package/src/ModalHost.tsx

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

package/src/index.ts

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

package/src/useModal.tsx

@@ -29,7 +29,7 @@ export const useModal = () => {
                 reject(reason);
                 pop();
             });
-            push(element);
+            push(<Fragment key={`modal-${key}`}>{element}</Fragment>);
         });
     };
 

package/src/useModalContext.ts

@@ -9,10 +9,4 @@ export const useModalContext = () => {
     }
 
     return context;
-};
-
-export const renderModals = () => {
-    const { stack } = useModalContext();
-
-    return stack.map((item) => (item));
 };