@captchafox/react 1.3.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +12 -11
  2. package/dist/index.cjs +17 -14
  3. package/dist/index.d.cts +1 -0
  4. package/dist/index.d.ts +1 -0
  5. package/dist/index.js +17 -14
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -34,17 +34,18 @@ function Example() {
34
34
 
35
35
  ### Props
36
36
 
37
- | **Prop** | **Type** | **Description** | **Required** |
38
- | -------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------ |
39
- | sitekey | `string` | The sitekey for the widget | ✅ |
40
- | lang | `string` | The language the widget should display. Defaults to automatically detecting it. | |
41
- | mode | `inline\|popup\|hidden` | The mode the widget should be displayed in . | |
42
- | theme | `light` \| `dark` \| [`ThemeDefinition`](https://docs.captchafox.com/theming#custom-theme) | The theme of the widget. Defaults to light. |
43
- | onVerify | `function` | Called with the response token after successful verification. | |
44
- | onFail | `function` | Called after unsuccessful verification. | |
45
- | onError | `function` | Called when an error occured. | |
46
- | onExpire | `function` | Called when the challenge expires. | |
47
- | onClose | `function` | Called when the challenge was closed. | |
37
+ | **Prop** | **Type** | **Description** | **Required** |
38
+ | -------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------ |
39
+ | sitekey | `string` | The sitekey for the widget | ✅ |
40
+ | lang | `string` | The language the widget should display. Defaults to automatically detecting it. | |
41
+ | mode | `inline\|popup\|hidden` | The mode the widget should be displayed in . | |
42
+ | theme | `light` | `dark` | [`ThemeDefinition`](https://docs.captchafox.com/theming#custom-theme) | The theme of the widget. Defaults to light. | |
43
+ | nonce | `string` | Randomly generated nonce | |
44
+ | onVerify | `function` | Called with the response token after successful verification. | |
45
+ | onFail | `function` | Called after unsuccessful verification. | |
46
+ | onError | `function` | Called when an error occured. | |
47
+ | onExpire | `function` | Called when the challenge expires. | |
48
+ | onClose | `function` | Called when the challenge was closed. | |
48
49
 
49
50
  ### Using the verification callback
50
51
 
package/dist/index.cjs CHANGED
@@ -66,7 +66,7 @@ var mountInstance = new Promise((resolve, reject) => {
66
66
  var LOAD_FUNC_KEY = "captchaFoxOnLoad";
67
67
  var SCRIPT_SRC = `https://cdn.captchafox.com/api.js?render=explicit&onload=${LOAD_FUNC_KEY}`;
68
68
  function loadCaptchaScript() {
69
- return __async(this, null, function* () {
69
+ return __async(this, arguments, function* ({ nonce } = {}) {
70
70
  if (document.querySelector(`script[src="${SCRIPT_SRC}"]`))
71
71
  return mountInstance;
72
72
  window[LOAD_FUNC_KEY] = resolveFn;
@@ -75,6 +75,9 @@ function loadCaptchaScript() {
75
75
  script.async = true;
76
76
  script.defer = true;
77
77
  script.onerror = rejectFn;
78
+ if (nonce) {
79
+ script.nonce = nonce;
80
+ }
78
81
  document.body.appendChild(script);
79
82
  return mountInstance;
80
83
  });
@@ -84,7 +87,7 @@ var isApiReady = () => typeof (window == null ? void 0 : window.captchafox) !==
84
87
  // src/CaptchaFox.tsx
85
88
  var import_react = __toESM(require("react"), 1);
86
89
  var CaptchaFox = (0, import_react.forwardRef)(
87
- ({ sitekey, lang, mode, theme, className, onError, onVerify, onLoad, onFail, onClose }, ref) => {
90
+ ({ sitekey, lang, mode, theme, className, nonce, onError, onVerify, onLoad, onFail, onClose }, ref) => {
88
91
  const [containerRef, setContainerRef] = (0, import_react.useState)();
89
92
  const [widgetId, setWidgetId] = (0, import_react.useState)();
90
93
  const firstRendered = (0, import_react.useRef)(false);
@@ -146,20 +149,20 @@ var CaptchaFox = (0, import_react.forwardRef)(
146
149
  if (!containerRef)
147
150
  return;
148
151
  if (firstRendered.current) {
149
- if (!isApiReady()) {
150
- return;
151
- }
152
- renderCaptcha();
153
- }
154
- loadCaptchaScript().then(() => __async(void 0, null, function* () {
155
152
  if (isApiReady()) {
156
- firstRendered.current = true;
157
- yield renderCaptcha();
153
+ renderCaptcha();
158
154
  }
159
- })).catch((err) => {
160
- onError == null ? void 0 : onError(err);
161
- console.error("[CaptchaFox] Could not load script:", err);
162
- });
155
+ } else {
156
+ loadCaptchaScript({ nonce }).then(() => __async(void 0, null, function* () {
157
+ if (isApiReady()) {
158
+ firstRendered.current = true;
159
+ yield renderCaptcha();
160
+ }
161
+ })).catch((err) => {
162
+ onError == null ? void 0 : onError(err);
163
+ console.error("[CaptchaFox] Could not load script:", err);
164
+ });
165
+ }
163
166
  }, [containerRef, sitekey, lang, mode]);
164
167
  return /* @__PURE__ */ import_react.default.createElement("div", { ref: setContainerRef, id: widgetId, className });
165
168
  }
package/dist/index.d.cts CHANGED
@@ -6,6 +6,7 @@ declare const CaptchaFox: React.ForwardRefExoticComponent<WidgetOptions & {
6
6
  /** Called after the widget has been loaded */
7
7
  onLoad?: (() => void) | undefined;
8
8
  className?: string | undefined;
9
+ nonce?: string | undefined;
9
10
  } & React.RefAttributes<CaptchaFoxInstance>>;
10
11
 
11
12
  declare const CAPTCHA_RESPONSE_KEY = "cf-captcha-response";
package/dist/index.d.ts CHANGED
@@ -6,6 +6,7 @@ declare const CaptchaFox: React.ForwardRefExoticComponent<WidgetOptions & {
6
6
  /** Called after the widget has been loaded */
7
7
  onLoad?: (() => void) | undefined;
8
8
  className?: string | undefined;
9
+ nonce?: string | undefined;
9
10
  } & React.RefAttributes<CaptchaFoxInstance>>;
10
11
 
11
12
  declare const CAPTCHA_RESPONSE_KEY = "cf-captcha-response";
package/dist/index.js CHANGED
@@ -30,7 +30,7 @@ var mountInstance = new Promise((resolve, reject) => {
30
30
  var LOAD_FUNC_KEY = "captchaFoxOnLoad";
31
31
  var SCRIPT_SRC = `https://cdn.captchafox.com/api.js?render=explicit&onload=${LOAD_FUNC_KEY}`;
32
32
  function loadCaptchaScript() {
33
- return __async(this, null, function* () {
33
+ return __async(this, arguments, function* ({ nonce } = {}) {
34
34
  if (document.querySelector(`script[src="${SCRIPT_SRC}"]`))
35
35
  return mountInstance;
36
36
  window[LOAD_FUNC_KEY] = resolveFn;
@@ -39,6 +39,9 @@ function loadCaptchaScript() {
39
39
  script.async = true;
40
40
  script.defer = true;
41
41
  script.onerror = rejectFn;
42
+ if (nonce) {
43
+ script.nonce = nonce;
44
+ }
42
45
  document.body.appendChild(script);
43
46
  return mountInstance;
44
47
  });
@@ -48,7 +51,7 @@ var isApiReady = () => typeof (window == null ? void 0 : window.captchafox) !==
48
51
  // src/CaptchaFox.tsx
49
52
  import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
50
53
  var CaptchaFox = forwardRef(
51
- ({ sitekey, lang, mode, theme, className, onError, onVerify, onLoad, onFail, onClose }, ref) => {
54
+ ({ sitekey, lang, mode, theme, className, nonce, onError, onVerify, onLoad, onFail, onClose }, ref) => {
52
55
  const [containerRef, setContainerRef] = useState();
53
56
  const [widgetId, setWidgetId] = useState();
54
57
  const firstRendered = useRef(false);
@@ -110,20 +113,20 @@ var CaptchaFox = forwardRef(
110
113
  if (!containerRef)
111
114
  return;
112
115
  if (firstRendered.current) {
113
- if (!isApiReady()) {
114
- return;
115
- }
116
- renderCaptcha();
117
- }
118
- loadCaptchaScript().then(() => __async(void 0, null, function* () {
119
116
  if (isApiReady()) {
120
- firstRendered.current = true;
121
- yield renderCaptcha();
117
+ renderCaptcha();
122
118
  }
123
- })).catch((err) => {
124
- onError == null ? void 0 : onError(err);
125
- console.error("[CaptchaFox] Could not load script:", err);
126
- });
119
+ } else {
120
+ loadCaptchaScript({ nonce }).then(() => __async(void 0, null, function* () {
121
+ if (isApiReady()) {
122
+ firstRendered.current = true;
123
+ yield renderCaptcha();
124
+ }
125
+ })).catch((err) => {
126
+ onError == null ? void 0 : onError(err);
127
+ console.error("[CaptchaFox] Could not load script:", err);
128
+ });
129
+ }
127
130
  }, [containerRef, sitekey, lang, mode]);
128
131
  return /* @__PURE__ */ React.createElement("div", { ref: setContainerRef, id: widgetId, className });
129
132
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@captchafox/react",
3
- "version": "1.3.0",
3
+ "version": "1.4.0",
4
4
  "main": "./dist/index.cjs",
5
5
  "module": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",