@captchafox/react 1.1.1 → 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 +15 -13
  3. package/dist/index.js +15 -13
  4. package/package.json +14 -15
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
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  "use strict";
2
3
  var __create = Object.create;
3
4
  var __defProp = Object.defineProperty;
@@ -83,7 +84,7 @@ var isApiReady = () => typeof (window == null ? void 0 : window.captchafox) !==
83
84
  // src/CaptchaFox.tsx
84
85
  var import_react = __toESM(require("react"), 1);
85
86
  var CaptchaFox = (0, import_react.forwardRef)(
86
- ({ sitekey, lang, mode, className, onError, onVerify, onLoad, onFail, onClose }, ref) => {
87
+ ({ sitekey, lang, mode, theme, className, onError, onVerify, onLoad, onFail, onClose }, ref) => {
87
88
  const [containerRef, setContainerRef] = (0, import_react.useState)();
88
89
  const [widgetId, setWidgetId] = (0, import_react.useState)();
89
90
  const firstRendered = (0, import_react.useRef)(false);
@@ -132,6 +133,7 @@ var CaptchaFox = (0, import_react.forwardRef)(
132
133
  lang,
133
134
  sitekey,
134
135
  mode,
136
+ theme,
135
137
  onError,
136
138
  onFail,
137
139
  onClose,
@@ -144,20 +146,20 @@ var CaptchaFox = (0, import_react.forwardRef)(
144
146
  if (!containerRef)
145
147
  return;
146
148
  if (firstRendered.current) {
147
- if (isApiReady()) {
148
- renderCaptcha();
149
+ if (!isApiReady()) {
150
+ return;
149
151
  }
150
- } else {
151
- loadCaptchaScript().then(() => __async(void 0, null, function* () {
152
- if (isApiReady()) {
153
- firstRendered.current = true;
154
- yield renderCaptcha();
155
- }
156
- })).catch((err) => {
157
- onError == null ? void 0 : onError(err);
158
- console.error("[CaptchaFox] Could not load script:", err);
159
- });
152
+ renderCaptcha();
160
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
+ });
161
163
  }, [containerRef, sitekey, lang, mode]);
162
164
  return /* @__PURE__ */ import_react.default.createElement("div", { ref: setContainerRef, id: widgetId, className });
163
165
  }
package/dist/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  var __async = (__this, __arguments, generator) => {
2
3
  return new Promise((resolve, reject) => {
3
4
  var fulfilled = (value) => {
@@ -47,7 +48,7 @@ var isApiReady = () => typeof (window == null ? void 0 : window.captchafox) !==
47
48
  // src/CaptchaFox.tsx
48
49
  import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
49
50
  var CaptchaFox = forwardRef(
50
- ({ sitekey, lang, mode, className, onError, onVerify, onLoad, onFail, onClose }, ref) => {
51
+ ({ sitekey, lang, mode, theme, className, onError, onVerify, onLoad, onFail, onClose }, ref) => {
51
52
  const [containerRef, setContainerRef] = useState();
52
53
  const [widgetId, setWidgetId] = useState();
53
54
  const firstRendered = useRef(false);
@@ -96,6 +97,7 @@ var CaptchaFox = forwardRef(
96
97
  lang,
97
98
  sitekey,
98
99
  mode,
100
+ theme,
99
101
  onError,
100
102
  onFail,
101
103
  onClose,
@@ -108,20 +110,20 @@ var CaptchaFox = forwardRef(
108
110
  if (!containerRef)
109
111
  return;
110
112
  if (firstRendered.current) {
111
- if (isApiReady()) {
112
- renderCaptcha();
113
+ if (!isApiReady()) {
114
+ return;
113
115
  }
114
- } else {
115
- loadCaptchaScript().then(() => __async(void 0, null, function* () {
116
- if (isApiReady()) {
117
- firstRendered.current = true;
118
- yield renderCaptcha();
119
- }
120
- })).catch((err) => {
121
- onError == null ? void 0 : onError(err);
122
- console.error("[CaptchaFox] Could not load script:", err);
123
- });
116
+ renderCaptcha();
124
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
+ });
125
127
  }, [containerRef, sitekey, lang, mode]);
126
128
  return /* @__PURE__ */ React.createElement("div", { ref: setContainerRef, id: widgetId, className });
127
129
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@captchafox/react",
3
- "version": "1.1.1",
3
+ "version": "1.3.0",
4
4
  "main": "./dist/index.cjs",
5
5
  "module": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -23,8 +23,8 @@
23
23
  "dist"
24
24
  ],
25
25
  "scripts": {
26
- "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
27
- "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
26
+ "build": "tsup src/index.tsx ",
27
+ "dev": "tsup src/index.tsx --watch",
28
28
  "lint": "eslint \"src/**/*.ts*\"",
29
29
  "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
30
30
  "test": "jest --coverage",
@@ -35,24 +35,23 @@
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
- "@testing-library/user-event": "^14.4.3",
45
- "@testing-library/jest-dom": "^5.16.5",
46
- "@types/jest": "^29.5.0",
47
- "@types/react": "^18.0.9",
48
- "@types/react-dom": "^18.0.4",
49
- "eslint": "^8.15.0",
45
+ "@testing-library/user-event": "^14.5.1",
46
+ "@testing-library/jest-dom": "^6.1.3",
47
+ "@types/react": "^18.2.25",
48
+ "@types/react-dom": "^18.2.11",
50
49
  "eslint-config-captchafox": "*",
51
- "jest": "^29.5.0",
52
- "jest-environment-jsdom": "^29.5.0",
53
- "react": "^18.1.0",
54
- "tsup": "^7.1.0",
55
- "ts-jest": "^29.0.5",
50
+ "jest": "^29.7.0",
51
+ "jest-environment-jsdom": "^29.7.0",
52
+ "react": "^18.2.0",
53
+ "tsup": "^7.2.0",
54
+ "ts-jest": "^29.1.1",
56
55
  "typescript": "^5.0.2"
57
56
  },
58
57
  "repository": {