react-turnstile - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

dist/index.d.ts

 import React from "react";
-export default function Turnstile({ id, className, style, sitekey, action, cData, theme, size, tabIndex, responseField, responseFieldName, onVerify, onLoad, onError, onExpire, }: TurnstileProps): JSX.Element;
+export default function Turnstile({ id, ref: userRef, className, style, sitekey, action, cData, theme, size, tabIndex, responseField, responseFieldName, retry, retryInterval, autoResetOnExpire, onVerify, onLoad, onError, onExpire, onTimeout, }: TurnstileProps): JSX.Element;
 interface TurnstileProps extends TurnstileCallbacks {
@@ -12,3 +12,7 @@ sitekey: string;
     responseFieldName?: string;
+    retry?: "auto" | "never";
+    retryInterval?: number;
+    autoResetOnExpire?: boolean;
     id?: string;
+    ref?: React.MutableRefObject<HTMLDivElement>;
     className?: string;
@@ -22,26 +26,4 @@ style?: React.CSSProperties;
     onExpire?: () => void;
+    onTimeout?: () => void;
 }
-declare global {
-    interface Window {
-        turnstile: {
-            render: (idOrContainer: string | HTMLElement, options: TurnstileOptions) => string;
-            reset: (widgetIdOrContainer: string | HTMLElement) => void;
-            getResponse: (widgetIdOrContainer: string | HTMLElement) => string | undefined;
-            remove: (widgetIdOrContainer: string | HTMLElement) => void;
-        };
-    }
-}
-interface TurnstileOptions {
-    sitekey: string;
-    action?: string;
-    cData?: string;
-    callback?: (token: string) => void;
-    "error-callback"?: () => void;
-    "expired-callback"?: () => void;
-    theme?: "light" | "dark" | "auto";
-    tabindex?: number;
-    size?: "normal" | "invisible" | "compact";
-    "response-field"?: boolean;
-    "response-field-name"?: string;
-}
 export {};

dist/index.js

@@ -60,5 +60,6 @@ "use strict";
 }
-function Turnstile({ id, className, style, sitekey, action, cData, theme, size, tabIndex, responseField, responseFieldName, onVerify, onLoad, onError, onExpire, }) {
-    const ref = (0, react_1.useRef)(null);
+function Turnstile({ id, ref: userRef, className, style, sitekey, action, cData, theme, size, tabIndex, responseField, responseFieldName, retry, retryInterval, autoResetOnExpire, onVerify, onLoad, onError, onExpire, onTimeout, }) {
+    const ownRef = (0, react_1.useRef)(null);
     const inplaceState = (0, react_1.useState)({ onVerify })[0];
+    const ref = userRef !== null && userRef !== void 0 ? userRef : ownRef;
     (0, react_1.useEffect)(() => {
@@ -92,5 +93,13 @@ if (!ref.current)
                 "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); },
+                "expired-callback": () => {
+                    var _a;
+                    (_a = inplaceState.onExpire) === null || _a === void 0 ? void 0 : _a.call(inplaceState);
+                    if (autoResetOnExpire)
+                        window.turnstile.reset(widgetId);
+                },
+                "timeout-callback": () => { var _a; return (_a = inplaceState.onTimeout) === null || _a === void 0 ? void 0 : _a.call(inplaceState); },
                 "response-field": responseField,
                 "response-field-name": responseFieldName,
+                retry,
+                "retry-interval": retryInterval,
             };
@@ -114,2 +123,5 @@ widgetId = window.turnstile.render(ref.current, turnstileOptions);
         responseFieldName,
+        retry,
+        retryInterval,
+        autoResetOnExpire,
     ]);
@@ -121,10 +133,6 @@ (0, react_1.useEffect)(() => {
         inplaceState.onExpire = onExpire;
-    }, [onVerify, onLoad, onError, onExpire]);
+    }, [onVerify, onLoad, onError, onExpire, onTimeout]);
     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,11 @@ # Changelog
 
+## [1.0.6] - 2022-11-25
+
+### Added
+
+- Support for the new `onTimeout` callback
+- `autoResetOnExpire` for automatically resetting the Turnstile widget once the token expires
+- `retry` & `retryInterval`
+- custom `ref` argument for using your own ref (#7)
+
 ## [1.0.5] - 2022-10-22
@@ -59,3 +68,4 @@
 
-[unreleased]: https://github.com/Le0Developer/react-turnstile/compare/v1.0.5...HEAD
+[unreleased]: https://github.com/Le0Developer/react-turnstile/compare/v1.0.6...HEAD
+[1.0.6]: https://github.com/le0developer/react-turnstile/compare/v1.0.5...v1.0.6
 [1.0.5]: https://github.com/le0developer/react-turnstile/compare/v1.0.4...v1.0.5
@@ -62,0 +72,0 @@ [1.0.4]: https://github.com/le0developer/react-turnstile/compare/v1.0.3...v1.0.4

package.json

 {
   "name": "react-turnstile",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "React library for Cloudflare's Turnstile CAPTCHA alternative",
@@ -30,4 +30,5 @@ "main": "dist/index.js",
     "prettier": "^2.7.1",
+    "turnstile-types": "^1.0.2",
     "typescript": "^4.8.4"
   }
 }

README.md

@@ -28,2 +28,5 @@ # react-turnstile
 
+Turnstile tokens expire after 5 minutes, to automatically reset the challenge once they expire,
+set the `autoResetOnExpire` prop to true or reset the widget yourself using the `onExpire` callback.
+
 ## Documentation
@@ -33,28 +36,29 @@
 
-| 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                             |
+| 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               |
+| retry             | string  | one of "auto", "never"                                |
+| retryInterval     | number  | interval of retries in ms                             |
+| autoResetOnExpire | boolean | automatically reset the widget when the token expires |
+| id                | string  | id of the div                                         |
+| ref               | Ref     | custom react ref for the div                          |
+| className         | string  | passed to the div                                     |
+| style             | object  | passed to the div                                     |
 
 And the following callbacks:
 
-| name     | arguments | description                                |
-| -------- | --------- | ------------------------------------------ |
-| onVerify | token     | called when challenge is passed (REQUIRED) |
-| onLoad   | -         | called when the widget is loaded           |
-| onError  | error     | called when an error occurs                |
-| onExpire | -         | called when the challenge expires \*\*     |
+| name      | arguments | description                                |
+| --------- | --------- | ------------------------------------------ |
+| onVerify  | token     | called when challenge is passed (REQUIRED) |
+| onLoad    | widgetId  | called when the widget is loaded           |
+| onError   | error     | called when an error occurs                |
+| onExpire  | -         | called when the token expires              |
+| onTimeout | -         | 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).

tsconfig.json

@@ -26,5 +26,6 @@ {
     "resolveJsonModule": true,
-    "isolatedModules": true
+    "isolatedModules": true,
+    "types": ["turnstile-types"]
   },
   "exclude": ["node_modules", "dist"]
 }

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

22546

increased by1.23%

Number of lines in readme file

63

increased by6.78%

Worsened metrics

Dev dependency count

4

increased by33.33%

Lines of code

339

decreased by-6.35%

No dependency changes