react-turnstile - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/index.d.ts

@@ -1,4 +0,4 @@
-/// <reference types="react" />
-export default function Turnstile({ id, className, sitekey, action, cData, theme, tabIndex, onVerify, onLoad, onError, onExpire, }: TurnstileProps): JSX.Element;
-interface TurnstileProps {
+import React from "react";
+export default function Turnstile({ id, className, style, sitekey, action, cData, theme, tabIndex, responseField, responseFieldName, onVerify, onLoad, onError, onExpire, }: TurnstileProps): JSX.Element;
+interface TurnstileProps extends TurnstileCallbacks {
     sitekey: string;
@@ -9,4 +9,9 @@ action?: string;
     tabIndex?: number;
+    responseField?: boolean;
+    responseFieldName?: string;
     id?: string;
     className?: string;
+    style?: React.CSSProperties;
+}
+interface TurnstileCallbacks {
     onVerify: (token: string) => void;
@@ -23,2 +28,3 @@ onLoad?: () => void;
             getResponse: (widgetId: string) => string | undefined;
+            remove: (widgetId: string) => void;
         };
@@ -36,3 +42,6 @@ }
     tabindex?: number;
+    size?: "normal" | "invisible" | "compact";
+    "response-field"?: boolean;
+    "response-field-name"?: string;
 }
 export {};

dist/index.js

@@ -48,3 +48,3 @@ "use strict";
             turnstileState = "loading";
-            const url = `${TURNSTILE_SRC}?onload=${TURNSTILE_LOAD_FUNCTION}`;
+            const url = `${TURNSTILE_SRC}?onload=${TURNSTILE_LOAD_FUNCTION}&render=explicit`;
             const script = document.createElement("script");
@@ -61,10 +61,12 @@ script.src = url;
 }
-function Turnstile({ id, className, sitekey, action, cData, theme, tabIndex, onVerify, onLoad, onError, onExpire, }) {
+function Turnstile({ id, className, style, sitekey, action, cData, theme, tabIndex, responseField, responseFieldName, onVerify, onLoad, onError, onExpire, }) {
     const ref = (0, react_1.createRef)();
+    const inplaceState = (0, react_1.useState)({ onVerify })[0];
     (0, react_1.useEffect)(() => {
         if (!ref.current)
             return;
+        let cancelled = false;
+        let widgetId = "";
         (async () => {
-            if (!ref.current)
-                return;
+            var _a, _b;
             // load turnstile
@@ -76,9 +78,10 @@ if (turnstileState !== "ready") {
                 catch (e) {
-                    onError === null || onError === void 0 ? void 0 : onError(e);
+                    (_a = inplaceState.onError) === null || _a === void 0 ? void 0 : _a.call(inplaceState, e);
                     return;
                 }
             }
-            onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+            (_b = inplaceState.onLoad) === null || _b === void 0 ? void 0 : _b.call(inplaceState);
             // turnstile is loaded, render the widget
-            ref.current.innerHTML = ""; // remove old widget
+            if (cancelled || !ref.current)
+                return;
             const turnstileOptions = {
@@ -90,8 +93,15 @@ sitekey,
                 tabindex: tabIndex,
-                callback: onVerify,
-                "error-callback": onError,
-                "expired-callback": onExpire,
+                callback: (token) => inplaceState.onVerify(token),
+                "error-callback": () => { var _a; return (_a = inplaceState.onError) === null || _a === void 0 ? void 0 : _a.call(inplaceState); },
+                "expired-callback": () => { var _a; return (_a = inplaceState.onExpire) === null || _a === void 0 ? void 0 : _a.call(inplaceState); },
+                "response-field": responseField,
+                "response-field-name": responseFieldName,
             };
-            window.turnstile.render(ref.current, turnstileOptions);
+            widgetId = window.turnstile.render(ref.current, turnstileOptions);
         })();
+        return () => {
+            cancelled = true;
+            if (widgetId)
+                window.turnstile.remove(widgetId);
+        };
     }, [
@@ -103,12 +113,18 @@ sitekey,
         tabIndex,
-        // reloading on the following causes an infinite loop
-        // ref,
-        // onVerify,
-        // onLoad,
-        // onError,
-        // onExpire,
+        responseField,
+        responseFieldName,
     ]);
-    return react_1.default.createElement("div", { ref: ref, id: id, className: className });
+    (0, react_1.useEffect)(() => {
+        inplaceState.onVerify = onVerify;
+        inplaceState.onLoad = onLoad;
+        inplaceState.onError = onError;
+        inplaceState.onExpire = onExpire;
+    }, [onVerify, onLoad, onError, onExpire]);
+    return react_1.default.createElement("div", { ref: ref, id: id, className: className, style: style });
 }
 exports.default = Turnstile;
+// query arguments when adding the script
+// compat=recaptcha      registers the turnstile api as window.grecaptcha and enables recaptcha compat
+// onload=x              function is executed when turnstile is loaded
+// render=explicit       if this value is anything but 'explicit', the DOM is searched for implicit widgets
 //# sourceMappingURL=index.js.map

HISTORY.md

@@ -10,2 +10,20 @@ # Changelog
 
+## [1.0.2] - 2022-10-05
+
+### Added
+
+- Experimental (undocumented) fields `responseField` and `responseFieldName` for controlling the `<input />` element generated by Turnstile.
+- `style` prop which is directly passed to the internal `<div />`
+
+### Changes
+
+- Using explicit rendering for Turnstile now which prevents [implicit renders](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#implicitly-render-the-turnstile-widget) (also undocumented)
+- Using `turnstile.remove()` to remove widgets after being unloaded
+
+### Fixed
+
+- A race condition when loading Turnstile on page load in dev mode has been fixed
+- Callback props will now update as expected
+- Entrypoint pointing to the wrong file (#3)
+
 ## [1.0.1] - 2022-10-01
@@ -22,4 +40,5 @@
 
-[unreleased]: https://github.com/olivierlacan/keep-a-changelog/compare/v1.0.1...HEAD
-[1.0.1]: https://github.com/olivierlacan/keep-a-changelog/compare/v1.0.0...v1.0.1
-[1.0.0]: https://github.com/olivierlacan/keep-a-changelog/releases/tag/v1.0.0
+[unreleased]: https://github.com/Le0Developer/react-turnstile/compare/v1.0.2...HEAD
+[1.0.2]: https://github.com/le0developer/react-turnstile/compare/v1.0.1...v1.0.2
+[1.0.1]: https://github.com/le0developer/react-turnstile/compare/v1.0.0...v1.0.1
+[1.0.0]: https://github.com/Le0Developer/react-turnstile/releases/tag/v1.0.0

package.json

 {
   "name": "react-turnstile",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "React library for Cloudflare's Turnstile CAPTCHA alternative",
-  "main": "dist/index.cjs",
+  "main": "dist/index.js",
   "scripts": {
@@ -7,0 +7,0 @@ "prepublishOnly": "npm run build",

README.md

@@ -32,10 +32,14 @@ # react-turnstile
 
-| name     | type   | description                        |
-| -------- | ------ | ---------------------------------- |
-| sitekey  | string | sitekey of your website (REQUIRED) |
-| action   | string | -                                  |
-| cData    | string | -                                  |
-| theme    | string | one of "light", "dark", "auto"     |
-| tabIndex | number |
-| id       | string | id of the div                      |
+| name              | type    | description                                   |
+| ----------------- | ------- | --------------------------------------------- |
+| sitekey           | string  | sitekey of your website (REQUIRED)            |
+| action            | string  | -                                             |
+| cData             | string  | -                                             |
+| theme             | string  | one of "light", "dark", "auto"                |
+| tabIndex          | number  | -                                             |
+| responseField     | boolean | controls generation of `<input />` element \* |
+| responseFieldName | string  | changes the name of `<input />` element \*    |
+| id                | string  | id of the div                                 |
+| className         | string  | passed to the div                             |
+| style             | object  | passed to the div                             |
 
@@ -49,4 +53,9 @@ And the following callbacks:
 | onError  | error     | called when an error occurs                |
-| onExpire | -         | called when the challenge expires          |
+| onExpire | -         | called when the challenge expires \*\*     |
 
+
+\* responseField and responseFieldName are experimental and not yet documented.
+
+\*\* `onExpire` is called when the Turnstile challenge expires without creating a token.
+
 For more details on what each argument does, see the [Cloudflare Documentation](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#configurations).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21431

increased by31.7%

Number of package files

11

increased by10%

Lines of code

355

increased by17.55%

Number of lines in readme file

60

increased by17.65%

No dependency changes