@queuezero/react 0.1.9 → 0.1.11

package/README.md

@@ -84,6 +84,11 @@ A ready-to-use signup form.
   displayMode="modal"
   triggerText="Join Our Waitlist"
   modalSize="md"
+// Headless modal mode (attaches to existing buttons)
+<WaitlistForm
+  displayMode="modal"
+  attachToText="Join Waitlist"
+  modalSize="md"
 />
 ```
 
@@ -93,6 +98,7 @@ A ready-to-use signup form.
 |------|------|---------|-------------|
 | `displayMode` | `'inline' \| 'modal'` | `'inline'` | Display as inline form or modal |
 | `triggerText` | `string` | `'Join Waitlist'` | Button text (modal mode only) |
+| `attachToText` | `string` | - | Text to match for auto-attaching modal (headless mode) |
 | `modalSize` | `'sm' \| 'md' \| 'lg'` | `'md'` | Modal width (modal mode only) |
 
 The modal automatically uses your campaign's branding (logo, cover image, theme color) from the API.

package/dist/index.d.mts

@@ -80,6 +80,10 @@ interface WaitlistFormProps {
     triggerText?: string;
     /** Modal size (only used when displayMode is 'modal') */
     modalSize?: 'sm' | 'md' | 'lg';
+    /** CSS selector to attach modal trigger to existing elements */
+    triggerSelector?: string;
+    /** Text content to match for attaching modal trigger to <a> and <button> elements */
+    attachToText?: string;
     /** Children for custom rendering */
     children?: React.ReactNode;
 }
@@ -203,7 +207,7 @@ declare function useWaitlist(campaign: string, config?: WaitlistProviderProps['c
  * <WaitlistForm displayMode="modal" triggerText="Join Our Waitlist" />
  * ```
  */
-declare function WaitlistForm({ onSuccess, onError, referrerCode, metadata, className, placeholder, buttonText, loadingText, showLabel, labelText, displayMode, triggerText, modalSize, children, }: WaitlistFormProps): any;
+declare function WaitlistForm({ onSuccess, onError, referrerCode, metadata, className, placeholder, buttonText, loadingText, showLabel, labelText, displayMode, triggerText, modalSize, triggerSelector, attachToText, children, }: WaitlistFormProps): any;
 
 /**
  * WaitlistStatus - Shows current position, score, and referral count

package/dist/index.d.ts

@@ -80,6 +80,10 @@ interface WaitlistFormProps {
     triggerText?: string;
     /** Modal size (only used when displayMode is 'modal') */
     modalSize?: 'sm' | 'md' | 'lg';
+    /** CSS selector to attach modal trigger to existing elements */
+    triggerSelector?: string;
+    /** Text content to match for attaching modal trigger to <a> and <button> elements */
+    attachToText?: string;
     /** Children for custom rendering */
     children?: React.ReactNode;
 }
@@ -203,7 +207,7 @@ declare function useWaitlist(campaign: string, config?: WaitlistProviderProps['c
  * <WaitlistForm displayMode="modal" triggerText="Join Our Waitlist" />
  * ```
  */
-declare function WaitlistForm({ onSuccess, onError, referrerCode, metadata, className, placeholder, buttonText, loadingText, showLabel, labelText, displayMode, triggerText, modalSize, children, }: WaitlistFormProps): any;
+declare function WaitlistForm({ onSuccess, onError, referrerCode, metadata, className, placeholder, buttonText, loadingText, showLabel, labelText, displayMode, triggerText, modalSize, triggerSelector, attachToText, children, }: WaitlistFormProps): any;
 
 /**
  * WaitlistStatus - Shows current position, score, and referral count

package/dist/index.js

@@ -182,6 +182,8 @@ function WaitlistForm({
   displayMode = "inline",
   triggerText = "Join Waitlist",
   modalSize = "md",
+  triggerSelector,
+  attachToText,
   children
 }) {
   const { join, loading, error, isJoined, config, configLoading } = useWaitlistContext();
@@ -348,8 +350,33 @@ function WaitlistForm({
   if (displayMode === "inline") {
     return formContent;
   }
+  const isHeadless = !!(triggerSelector || attachToText);
+  (0, import_react2.useEffect)(() => {
+    if (displayMode !== "modal") return;
+    const cleanupFns = [];
+    const attach = (element) => {
+      const handler = (e) => {
+        e.preventDefault();
+        setIsModalOpen(true);
+      };
+      element.addEventListener("click", handler);
+      cleanupFns.push(() => element.removeEventListener("click", handler));
+    };
+    if (triggerSelector) {
+      document.querySelectorAll(triggerSelector).forEach(attach);
+    }
+    if (attachToText) {
+      const lowerText = attachToText.toLowerCase();
+      document.querySelectorAll("a, button").forEach((el) => {
+        if (el.textContent?.toLowerCase().includes(lowerText)) {
+          attach(el);
+        }
+      });
+    }
+    return () => cleanupFns.forEach((fn) => fn());
+  }, [displayMode, triggerSelector, attachToText]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    !isHeadless && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "button",
       {
         type: "button",

package/dist/index.mjs

@@ -148,6 +148,8 @@ function WaitlistForm({
   displayMode = "inline",
   triggerText = "Join Waitlist",
   modalSize = "md",
+  triggerSelector,
+  attachToText,
   children
 }) {
   const { join, loading, error, isJoined, config, configLoading } = useWaitlistContext();
@@ -314,8 +316,33 @@ function WaitlistForm({
   if (displayMode === "inline") {
     return formContent;
   }
+  const isHeadless = !!(triggerSelector || attachToText);
+  useEffect2(() => {
+    if (displayMode !== "modal") return;
+    const cleanupFns = [];
+    const attach = (element) => {
+      const handler = (e) => {
+        e.preventDefault();
+        setIsModalOpen(true);
+      };
+      element.addEventListener("click", handler);
+      cleanupFns.push(() => element.removeEventListener("click", handler));
+    };
+    if (triggerSelector) {
+      document.querySelectorAll(triggerSelector).forEach(attach);
+    }
+    if (attachToText) {
+      const lowerText = attachToText.toLowerCase();
+      document.querySelectorAll("a, button").forEach((el) => {
+        if (el.textContent?.toLowerCase().includes(lowerText)) {
+          attach(el);
+        }
+      });
+    }
+    return () => cleanupFns.forEach((fn) => fn());
+  }, [displayMode, triggerSelector, attachToText]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2(
+    !isHeadless && /* @__PURE__ */ jsx2(
       "button",
       {
         type: "button",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@queuezero/react",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "React components and hooks for QueueZero viral waitlists",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",