@drippr/embed-react 0.2.0 → 0.2.2

package/README.md

@@ -158,6 +158,7 @@ function FeedbackDrawer() {
 | `style` | `React.CSSProperties` | No | - | Inline styles for the container |
 | `height` | `number` | No | `700` | Fallback height for the iframe (px) |
 | `baseUrl` | `string` | No | `"https://app.drippr.io"` | Base URL for the embed |
+| `prefetch` | `boolean` | No | `true` | Prefetch page content for faster loading (modal/drawer only). Set to `false` if it causes issues with your implementation. |
 
 ### PrefillData
 
@@ -199,6 +200,7 @@ interface DripprFlowApi {
 - **Three Display Modes**: Inline, modal, and drawer
 - **Flexible Triggers**: Use render props or controlled state with external buttons
 - **Automatic Z-Index**: High z-index values prevent CSS framework conflicts (Tailwind, etc.)
+- **Smart Preloading**: Iframe and page content are preloaded for instant opening (modal/drawer modes)
 - **Prefill Support**: Pre-populate form fields with user data
 - **Auto-resize**: Iframe automatically resizes based on content
 - **TypeScript**: Full TypeScript support with exported types
@@ -210,6 +212,7 @@ interface DripprFlowApi {
   - Render prop `children` pattern, OR
   - External button with controlled `open`/`onOpenChange` props
 - **Z-Index**: Automatically set to high values (99999+) to prevent conflicts with CSS frameworks like Tailwind CSS
+- **Prefetching**: Enabled by default (`prefetch={true}`) for faster loading. The component automatically prefetches the page content when mounted (modal/drawer modes only). If this causes issues with your implementation (e.g., unwanted network requests, conflicts with your routing), you can disable it with `prefetch={false}`.
 
 ## Requirements
 

package/dist/index.d.mts

@@ -54,8 +54,10 @@ interface DripprFlowProps {
     height?: number;
     /** Base URL for the embed (defaults to production) */
     baseUrl?: string;
+    /** Prefetch page content for faster loading (default: true). Set to false if it causes issues with your implementation. */
+    prefetch?: boolean;
 }
 
-declare function DripprFlow({ flowId, mode, open: controlledOpen, onOpenChange, prefill, children, onSubmitted, className, style, height: fallbackHeight, baseUrl, }: DripprFlowProps): react_jsx_runtime.JSX.Element | null;
+declare function DripprFlow({ flowId, mode, open: controlledOpen, onOpenChange, prefill, children, onSubmitted, className, style, height: fallbackHeight, baseUrl, prefetch, }: DripprFlowProps): react_jsx_runtime.JSX.Element | null;
 
 export { DripprFlow, type DripprFlowApi, type DripprFlowProps, type DripprMessage, type DripprMessageFromChild, type DripprMessageToChild, type EmbedMode, type PrefillData };

package/dist/index.d.ts

@@ -54,8 +54,10 @@ interface DripprFlowProps {
     height?: number;
     /** Base URL for the embed (defaults to production) */
     baseUrl?: string;
+    /** Prefetch page content for faster loading (default: true). Set to false if it causes issues with your implementation. */
+    prefetch?: boolean;
 }
 
-declare function DripprFlow({ flowId, mode, open: controlledOpen, onOpenChange, prefill, children, onSubmitted, className, style, height: fallbackHeight, baseUrl, }: DripprFlowProps): react_jsx_runtime.JSX.Element | null;
+declare function DripprFlow({ flowId, mode, open: controlledOpen, onOpenChange, prefill, children, onSubmitted, className, style, height: fallbackHeight, baseUrl, prefetch, }: DripprFlowProps): react_jsx_runtime.JSX.Element | null;
 
 export { DripprFlow, type DripprFlowApi, type DripprFlowProps, type DripprMessage, type DripprMessageFromChild, type DripprMessageToChild, type EmbedMode, type PrefillData };

package/dist/index.js

@@ -204,22 +204,37 @@ function ModalContainer({
     borderRadius: "2px",
     margin: "6px auto 2px"
   };
-  if (!mounted) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: trigger });
-  }
+  const iframeStyles = {
+    width: "100%",
+    height: isMobile ? `${Math.min(height, window.innerHeight - 80)}px` : `${Math.min(height, window.innerHeight * 0.85)}px`,
+    border: "none",
+    display: "block"
+  };
+  const containerStyles = mounted ? {} : {
+    position: "absolute",
+    left: "-9999px",
+    width: "1px",
+    height: "1px",
+    visibility: "hidden",
+    pointerEvents: "none",
+    overflow: "hidden"
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     trigger,
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",
       {
-        style: overlayStyles,
+        style: {
+          ...overlayStyles,
+          ...containerStyles
+        },
         onClick: (e) => {
-          if (e.target === e.currentTarget) {
+          if (mounted && e.target === e.currentTarget) {
             onOpenChange(false);
           }
         },
         role: "dialog",
-        "aria-modal": "true",
+        "aria-modal": mounted ? "true" : "false",
         children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           "div",
           {
@@ -247,13 +262,8 @@ function ModalContainer({
                 {
                   ref: iframeRef,
                   src,
-                  style: {
-                    width: "100%",
-                    height: isMobile ? `${Math.min(height, window.innerHeight - 80)}px` : `${Math.min(height, window.innerHeight * 0.85)}px`,
-                    border: "none",
-                    display: "block"
-                  },
-                  loading: "lazy",
+                  style: iframeStyles,
+                  loading: "eager",
                   title: "Drippr Feedback"
                 }
               )
@@ -406,17 +416,37 @@ function DrawerContainer({
     borderRadius: "2px",
     margin: "6px auto 2px"
   };
-  if (!mounted) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: trigger });
-  }
+  const iframeStyles = {
+    width: "100%",
+    height: isMobile ? `${Math.min(height, window.innerHeight - 80)}px` : `${height}px`,
+    minHeight: isMobile ? void 0 : "100%",
+    border: "none",
+    display: "block"
+  };
+  const containerStyles = mounted ? {} : {
+    position: "absolute",
+    left: "-9999px",
+    width: "1px",
+    height: "1px",
+    visibility: "hidden",
+    pointerEvents: "none",
+    overflow: "hidden"
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     trigger,
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
-        style: overlayStyles,
-        onClick: () => onOpenChange(false),
-        "aria-hidden": "true"
+        style: {
+          ...overlayStyles,
+          ...containerStyles
+        },
+        onClick: () => {
+          if (mounted) {
+            onOpenChange(false);
+          }
+        },
+        "aria-hidden": mounted ? "false" : "true"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -426,11 +456,12 @@ function DrawerContainer({
         style: {
           ...drawerStyles,
           ...style,
+          ...containerStyles,
           // Ensure z-index is always set (user's style prop shouldn't override it)
           zIndex: style?.zIndex ?? drawerStyles.zIndex
         },
         role: "dialog",
-        "aria-modal": "true",
+        "aria-modal": mounted ? "true" : "false",
         children: [
           isMobile && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: handleStyles }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: headerStyles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -448,14 +479,8 @@ function DrawerContainer({
             {
               ref: iframeRef,
               src,
-              style: {
-                width: "100%",
-                height: isMobile ? `${Math.min(height, window.innerHeight - 80)}px` : `${height}px`,
-                minHeight: isMobile ? void 0 : "100%",
-                border: "none",
-                display: "block"
-              },
-              loading: "lazy",
+              style: iframeStyles,
+              loading: "eager",
               title: "Drippr Feedback"
             }
           ) })
@@ -483,7 +508,8 @@ function DripprFlow({
   className,
   style,
   height: fallbackHeight = DEFAULT_HEIGHT,
-  baseUrl = DEFAULT_BASE_URL
+  baseUrl = DEFAULT_BASE_URL,
+  prefetch = true
 }) {
   const [instanceId] = React3.useState(generateInstanceId);
   const [height, setHeight] = React3.useState(fallbackHeight);
@@ -573,6 +599,19 @@ function DripprFlow({
       );
     }
   }, [mode, children, isControlled]);
+  React3.useEffect(() => {
+    if (!prefetch || mode === "inline") return;
+    const link = document.createElement("link");
+    link.rel = "prefetch";
+    link.href = src;
+    link.as = "document";
+    document.head.appendChild(link);
+    return () => {
+      if (document.head.contains(link)) {
+        document.head.removeChild(link);
+      }
+    };
+  }, [src, mode, prefetch]);
   const trigger = mode !== "inline" && children ? children(api) : null;
   if (mode === "inline") {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(

package/dist/index.mjs

@@ -168,22 +168,37 @@ function ModalContainer({
     borderRadius: "2px",
     margin: "6px auto 2px"
   };
-  if (!mounted) {
-    return /* @__PURE__ */ jsx2(Fragment, { children: trigger });
-  }
+  const iframeStyles = {
+    width: "100%",
+    height: isMobile ? `${Math.min(height, window.innerHeight - 80)}px` : `${Math.min(height, window.innerHeight * 0.85)}px`,
+    border: "none",
+    display: "block"
+  };
+  const containerStyles = mounted ? {} : {
+    position: "absolute",
+    left: "-9999px",
+    width: "1px",
+    height: "1px",
+    visibility: "hidden",
+    pointerEvents: "none",
+    overflow: "hidden"
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     trigger,
     /* @__PURE__ */ jsx2(
       "div",
       {
-        style: overlayStyles,
+        style: {
+          ...overlayStyles,
+          ...containerStyles
+        },
         onClick: (e) => {
-          if (e.target === e.currentTarget) {
+          if (mounted && e.target === e.currentTarget) {
             onOpenChange(false);
           }
         },
         role: "dialog",
-        "aria-modal": "true",
+        "aria-modal": mounted ? "true" : "false",
         children: /* @__PURE__ */ jsxs(
           "div",
           {
@@ -211,13 +226,8 @@ function ModalContainer({
                 {
                   ref: iframeRef,
                   src,
-                  style: {
-                    width: "100%",
-                    height: isMobile ? `${Math.min(height, window.innerHeight - 80)}px` : `${Math.min(height, window.innerHeight * 0.85)}px`,
-                    border: "none",
-                    display: "block"
-                  },
-                  loading: "lazy",
+                  style: iframeStyles,
+                  loading: "eager",
                   title: "Drippr Feedback"
                 }
               )
@@ -370,17 +380,37 @@ function DrawerContainer({
     borderRadius: "2px",
     margin: "6px auto 2px"
   };
-  if (!mounted) {
-    return /* @__PURE__ */ jsx3(Fragment2, { children: trigger });
-  }
+  const iframeStyles = {
+    width: "100%",
+    height: isMobile ? `${Math.min(height, window.innerHeight - 80)}px` : `${height}px`,
+    minHeight: isMobile ? void 0 : "100%",
+    border: "none",
+    display: "block"
+  };
+  const containerStyles = mounted ? {} : {
+    position: "absolute",
+    left: "-9999px",
+    width: "1px",
+    height: "1px",
+    visibility: "hidden",
+    pointerEvents: "none",
+    overflow: "hidden"
+  };
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     trigger,
     /* @__PURE__ */ jsx3(
       "div",
       {
-        style: overlayStyles,
-        onClick: () => onOpenChange(false),
-        "aria-hidden": "true"
+        style: {
+          ...overlayStyles,
+          ...containerStyles
+        },
+        onClick: () => {
+          if (mounted) {
+            onOpenChange(false);
+          }
+        },
+        "aria-hidden": mounted ? "false" : "true"
       }
     ),
     /* @__PURE__ */ jsxs2(
@@ -390,11 +420,12 @@ function DrawerContainer({
         style: {
           ...drawerStyles,
           ...style,
+          ...containerStyles,
           // Ensure z-index is always set (user's style prop shouldn't override it)
           zIndex: style?.zIndex ?? drawerStyles.zIndex
         },
         role: "dialog",
-        "aria-modal": "true",
+        "aria-modal": mounted ? "true" : "false",
         children: [
           isMobile && /* @__PURE__ */ jsx3("div", { style: handleStyles }),
           /* @__PURE__ */ jsx3("div", { style: headerStyles, children: /* @__PURE__ */ jsx3(
@@ -412,14 +443,8 @@ function DrawerContainer({
             {
               ref: iframeRef,
               src,
-              style: {
-                width: "100%",
-                height: isMobile ? `${Math.min(height, window.innerHeight - 80)}px` : `${height}px`,
-                minHeight: isMobile ? void 0 : "100%",
-                border: "none",
-                display: "block"
-              },
-              loading: "lazy",
+              style: iframeStyles,
+              loading: "eager",
               title: "Drippr Feedback"
             }
           ) })
@@ -447,7 +472,8 @@ function DripprFlow({
   className,
   style,
   height: fallbackHeight = DEFAULT_HEIGHT,
-  baseUrl = DEFAULT_BASE_URL
+  baseUrl = DEFAULT_BASE_URL,
+  prefetch = true
 }) {
   const [instanceId] = React3.useState(generateInstanceId);
   const [height, setHeight] = React3.useState(fallbackHeight);
@@ -537,6 +563,19 @@ function DripprFlow({
       );
     }
   }, [mode, children, isControlled]);
+  React3.useEffect(() => {
+    if (!prefetch || mode === "inline") return;
+    const link = document.createElement("link");
+    link.rel = "prefetch";
+    link.href = src;
+    link.as = "document";
+    document.head.appendChild(link);
+    return () => {
+      if (document.head.contains(link)) {
+        document.head.removeChild(link);
+      }
+    };
+  }, [src, mode, prefetch]);
   const trigger = mode !== "inline" && children ? children(api) : null;
   if (mode === "inline") {
     return /* @__PURE__ */ jsx4(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drippr/embed-react",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "React component for embedding Drippr feedback flows",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -20,8 +20,7 @@
     "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
     "lint": "eslint src/",
     "typecheck": "tsc --noEmit",
-    "prepublishOnly": "npm run build",
-    "publish": "npm publish --access public"
+    "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
     "react": ">=18.0.0",