@captchafox/react 1.0.0 → 1.0.2

package/README.md

@@ -33,13 +33,13 @@ function Example() {
 | **Prop** | **Type**                | **Description**                                                                 | **Required** |
 | -------- | ----------------------- | ------------------------------------------------------------------------------- | ------------ |
 | sitekey  | `string`                | The sitekey for the widget                                                      | ✅            |
-| lng      | `string`                | The language the widget should display. Defaults to automatically detecting it. |              |
-| mode     | `inline\|popup\|hidden` | The mode the widget should be displayed in                                      |              |
-| onVerify | `function`              | Called with the response token after successful verification                    |              |
-| onFail   | `function`              | Called after unsuccessful verification                                          |              |
-| onError  | `function`              | Called if an error occured                                                      |              |
-| onExpire | `function`              | Called if the challenge expired                                                 |              |
-| onClose  | `function`              | Called if the challenge was closed                                              |              |
+| lang     | `string`                | The language the widget should display. Defaults to automatically detecting it. |              |
+| mode     | `inline\|popup\|hidden` | The mode the widget should be displayed in .                                    |              |
+| onVerify | `function`              | Called with the response token after successful verification.                   |              |
+| onFail   | `function`              | Called after unsuccessful verification.                                         |              |
+| onError  | `function`              | Called when an error occured.                                                   |              |
+| onExpire | `function`              | Called when the challenge expires.                                              |              |
+| onClose  | `function`              | Called when the challenge was closed.                                           |              |
 
 ### Using the verification callback
 

package/dist/index.js

@@ -75,8 +75,8 @@ var isApiReady = () => typeof (window == null ? void 0 : window.captchafox) !==
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var CaptchaFox = (0, import_react.forwardRef)(
-  ({ sitekey, lng, mode, className, onError, onVerify, onLoad, onFail, onClose }, ref) => {
-    const containerRef = (0, import_react.createRef)();
+  ({ sitekey, lang, mode, className, onError, onVerify, onLoad, onFail, onClose }, ref) => {
+    const [containerRef, setContainerRef] = (0, import_react.useState)();
     const [widgetId, setWidgetId] = (0, import_react.useState)();
     const firstRendered = (0, import_react.useRef)(false);
     (0, import_react.useImperativeHandle)(
@@ -116,12 +116,12 @@ var CaptchaFox = (0, import_react.forwardRef)(
       [widgetId]
     );
     const renderCaptcha = () => __async(void 0, null, function* () {
-      var _a, _b, _c, _d;
+      var _a, _b, _c;
       (_a = window.captchafox) == null ? void 0 : _a.remove(widgetId);
-      if (!containerRef.current || ((_c = (_b = containerRef.current) == null ? void 0 : _b.children) == null ? void 0 : _c.length) === 1)
+      if (!containerRef || ((_b = containerRef == null ? void 0 : containerRef.children) == null ? void 0 : _b.length) === 1)
         return;
-      const newWidgetId = yield (_d = window.captchafox) == null ? void 0 : _d.render(containerRef.current, {
-        lng,
+      const newWidgetId = yield (_c = window.captchafox) == null ? void 0 : _c.render(containerRef, {
+        lang,
         sitekey,
         mode,
         onError,
@@ -133,6 +133,8 @@ var CaptchaFox = (0, import_react.forwardRef)(
       onLoad == null ? void 0 : onLoad();
     });
     (0, import_react.useEffect)(() => {
+      if (!containerRef)
+        return;
       if (firstRendered.current) {
         if (isApiReady()) {
           renderCaptcha();
@@ -148,8 +150,8 @@ var CaptchaFox = (0, import_react.forwardRef)(
           console.error("[CaptchaFox] Could not load script:", err);
         });
       }
-    }, [sitekey, lng, mode]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: containerRef, id: widgetId, className });
+    }, [containerRef, sitekey, lang, mode]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: setContainerRef, id: widgetId, className });
   }
 );
 CaptchaFox.displayName = "CaptchaFox";

package/dist/index.mjs

@@ -46,11 +46,11 @@ function loadCaptchaScript() {
 var isApiReady = () => typeof (window == null ? void 0 : window.captchafox) !== "undefined";
 
 // src/CaptchaFox.tsx
-import { createRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 var CaptchaFox = forwardRef(
-  ({ sitekey, lng, mode, className, onError, onVerify, onLoad, onFail, onClose }, ref) => {
-    const containerRef = createRef();
+  ({ sitekey, lang, mode, className, onError, onVerify, onLoad, onFail, onClose }, ref) => {
+    const [containerRef, setContainerRef] = useState();
     const [widgetId, setWidgetId] = useState();
     const firstRendered = useRef(false);
     useImperativeHandle(
@@ -90,12 +90,12 @@ var CaptchaFox = forwardRef(
       [widgetId]
     );
     const renderCaptcha = () => __async(void 0, null, function* () {
-      var _a, _b, _c, _d;
+      var _a, _b, _c;
       (_a = window.captchafox) == null ? void 0 : _a.remove(widgetId);
-      if (!containerRef.current || ((_c = (_b = containerRef.current) == null ? void 0 : _b.children) == null ? void 0 : _c.length) === 1)
+      if (!containerRef || ((_b = containerRef == null ? void 0 : containerRef.children) == null ? void 0 : _b.length) === 1)
         return;
-      const newWidgetId = yield (_d = window.captchafox) == null ? void 0 : _d.render(containerRef.current, {
-        lng,
+      const newWidgetId = yield (_c = window.captchafox) == null ? void 0 : _c.render(containerRef, {
+        lang,
         sitekey,
         mode,
         onError,
@@ -107,6 +107,8 @@ var CaptchaFox = forwardRef(
       onLoad == null ? void 0 : onLoad();
     });
     useEffect(() => {
+      if (!containerRef)
+        return;
       if (firstRendered.current) {
         if (isApiReady()) {
           renderCaptcha();
@@ -122,8 +124,8 @@ var CaptchaFox = forwardRef(
           console.error("[CaptchaFox] Could not load script:", err);
         });
       }
-    }, [sitekey, lng, mode]);
-    return /* @__PURE__ */ jsx("div", { ref: containerRef, id: widgetId, className });
+    }, [containerRef, sitekey, lang, mode]);
+    return /* @__PURE__ */ jsx("div", { ref: setContainerRef, id: widgetId, className });
   }
 );
 CaptchaFox.displayName = "CaptchaFox";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@captchafox/react",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",