@captchafox/react 1.2.0 → 1.3.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 (4) hide show
  1. package/README.md +29 -27
  2. package/dist/index.cjs +14 -13
  3. package/dist/index.js +14 -13
  4. package/package.json +3 -3
package/README.md CHANGED
@@ -18,49 +18,49 @@ yarn add @captchafox/react
18
18
  pnpm add @captchafox/react
19
19
  ```
20
20
 
21
+ ```sh
22
+ bun add @captchafox/react
23
+ ```
24
+
21
25
  ## Usage
22
26
 
23
27
  ```tsx
24
- import { CaptchaFox } from '@captchafox/react'
28
+ import { CaptchaFox } from '@captchafox/react';
25
29
 
26
30
  function Example() {
27
- return <CaptchaFox sitekey="sk_11111111000000001111111100000000" />
31
+ return <CaptchaFox sitekey="sk_11111111000000001111111100000000" />;
28
32
  }
29
33
  ```
30
34
 
31
35
  ### Props
32
36
 
33
- | **Prop** | **Type** | **Description** | **Required** |
34
- | -------- | ----------------------- | ------------------------------------------------------------------------------- | ------------ |
35
- | sitekey | `string` | The sitekey for the widget | ✅ |
36
- | lang | `string` | The language the widget should display. Defaults to automatically detecting it. | |
37
- | mode | `inline\|popup\|hidden` | The mode the widget should be displayed in . | |
38
- | onVerify | `function` | Called with the response token after successful verification. | |
39
- | onFail | `function` | Called after unsuccessful verification. | |
40
- | onError | `function` | Called when an error occured. | |
41
- | onExpire | `function` | Called when the challenge expires. | |
42
- | 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
+ | 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. | |
43
48
 
44
49
  ### Using the verification callback
45
50
 
46
51
  ```jsx
47
- import { CaptchaFox, CAPTCHA_RESPONSE_KEY } from '@captchafox/react'
52
+ import { CaptchaFox, CAPTCHA_RESPONSE_KEY } from '@captchafox/react';
48
53
 
49
54
  function Example() {
50
- const handleVerify = (token: string) => {
51
- // do something with the token here (e.g. submit the form)
52
- const formData = {
53
- // your form data
54
- [CAPTCHA_RESPONSE_KEY]: token
55
- };
56
- }
57
-
58
- return (
59
- <CaptchaFox
60
- sitekey="sk_11111111000000001111111100000000"
61
- onVerify={handleVerify}
62
- />
63
- )
55
+ const handleVerify = (token: string) => {
56
+ // do something with the token here (e.g. submit the form)
57
+ const formData = {
58
+ // your form data
59
+ [CAPTCHA_RESPONSE_KEY]: token
60
+ };
61
+ };
62
+
63
+ return <CaptchaFox sitekey="sk_11111111000000001111111100000000" onVerify={handleVerify} />;
64
64
  }
65
65
  ```
66
66
 
@@ -91,3 +91,5 @@ function Example() {
91
91
  )
92
92
  }
93
93
  ```
94
+
95
+ You can find more detailed examples in the [GitHub repository](https://github.com/CaptchaFox/javascript-integrations/tree/main/examples/react).
package/dist/index.cjs CHANGED
@@ -84,7 +84,7 @@ var isApiReady = () => typeof (window == null ? void 0 : window.captchafox) !==
84
84
  // src/CaptchaFox.tsx
85
85
  var import_react = __toESM(require("react"), 1);
86
86
  var CaptchaFox = (0, import_react.forwardRef)(
87
- ({ sitekey, lang, mode, className, onError, onVerify, onLoad, onFail, onClose }, ref) => {
87
+ ({ sitekey, lang, mode, theme, className, onError, onVerify, onLoad, onFail, onClose }, ref) => {
88
88
  const [containerRef, setContainerRef] = (0, import_react.useState)();
89
89
  const [widgetId, setWidgetId] = (0, import_react.useState)();
90
90
  const firstRendered = (0, import_react.useRef)(false);
@@ -133,6 +133,7 @@ var CaptchaFox = (0, import_react.forwardRef)(
133
133
  lang,
134
134
  sitekey,
135
135
  mode,
136
+ theme,
136
137
  onError,
137
138
  onFail,
138
139
  onClose,
@@ -145,20 +146,20 @@ var CaptchaFox = (0, import_react.forwardRef)(
145
146
  if (!containerRef)
146
147
  return;
147
148
  if (firstRendered.current) {
148
- if (isApiReady()) {
149
- renderCaptcha();
149
+ if (!isApiReady()) {
150
+ return;
150
151
  }
151
- } else {
152
- loadCaptchaScript().then(() => __async(void 0, null, function* () {
153
- if (isApiReady()) {
154
- firstRendered.current = true;
155
- yield renderCaptcha();
156
- }
157
- })).catch((err) => {
158
- onError == null ? void 0 : onError(err);
159
- console.error("[CaptchaFox] Could not load script:", err);
160
- });
152
+ renderCaptcha();
161
153
  }
154
+ loadCaptchaScript().then(() => __async(void 0, null, function* () {
155
+ if (isApiReady()) {
156
+ firstRendered.current = true;
157
+ yield renderCaptcha();
158
+ }
159
+ })).catch((err) => {
160
+ onError == null ? void 0 : onError(err);
161
+ console.error("[CaptchaFox] Could not load script:", err);
162
+ });
162
163
  }, [containerRef, sitekey, lang, mode]);
163
164
  return /* @__PURE__ */ import_react.default.createElement("div", { ref: setContainerRef, id: widgetId, className });
164
165
  }
package/dist/index.js CHANGED
@@ -48,7 +48,7 @@ var isApiReady = () => typeof (window == null ? void 0 : window.captchafox) !==
48
48
  // src/CaptchaFox.tsx
49
49
  import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
50
50
  var CaptchaFox = forwardRef(
51
- ({ sitekey, lang, mode, className, onError, onVerify, onLoad, onFail, onClose }, ref) => {
51
+ ({ sitekey, lang, mode, theme, className, onError, onVerify, onLoad, onFail, onClose }, ref) => {
52
52
  const [containerRef, setContainerRef] = useState();
53
53
  const [widgetId, setWidgetId] = useState();
54
54
  const firstRendered = useRef(false);
@@ -97,6 +97,7 @@ var CaptchaFox = forwardRef(
97
97
  lang,
98
98
  sitekey,
99
99
  mode,
100
+ theme,
100
101
  onError,
101
102
  onFail,
102
103
  onClose,
@@ -109,20 +110,20 @@ var CaptchaFox = forwardRef(
109
110
  if (!containerRef)
110
111
  return;
111
112
  if (firstRendered.current) {
112
- if (isApiReady()) {
113
- renderCaptcha();
113
+ if (!isApiReady()) {
114
+ return;
114
115
  }
115
- } else {
116
- loadCaptchaScript().then(() => __async(void 0, null, function* () {
117
- if (isApiReady()) {
118
- firstRendered.current = true;
119
- yield renderCaptcha();
120
- }
121
- })).catch((err) => {
122
- onError == null ? void 0 : onError(err);
123
- console.error("[CaptchaFox] Could not load script:", err);
124
- });
116
+ renderCaptcha();
125
117
  }
118
+ loadCaptchaScript().then(() => __async(void 0, null, function* () {
119
+ if (isApiReady()) {
120
+ firstRendered.current = true;
121
+ yield renderCaptcha();
122
+ }
123
+ })).catch((err) => {
124
+ onError == null ? void 0 : onError(err);
125
+ console.error("[CaptchaFox] Could not load script:", err);
126
+ });
126
127
  }, [containerRef, sitekey, lang, mode]);
127
128
  return /* @__PURE__ */ React.createElement("div", { ref: setContainerRef, id: widgetId, className });
128
129
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@captchafox/react",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
4
  "main": "./dist/index.cjs",
5
5
  "module": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -35,15 +35,15 @@
35
35
  "react-dom": ">=16.8.0"
36
36
  },
37
37
  "dependencies": {
38
- "@captchafox/types": "^1.1.0"
38
+ "@captchafox/types": "^1.2.0"
39
39
  },
40
40
  "devDependencies": {
41
41
  "@captchafox/tsconfig": "*",
42
42
  "@captchafox/internal": "*",
43
+ "@jest/globals": "^29.7.0",
43
44
  "@testing-library/react": "^14.0.0",
44
45
  "@testing-library/user-event": "^14.5.1",
45
46
  "@testing-library/jest-dom": "^6.1.3",
46
- "@types/jest": "^29.5.5",
47
47
  "@types/react": "^18.2.25",
48
48
  "@types/react-dom": "^18.2.11",
49
49
  "eslint-config-captchafox": "*",