🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
@captchafox/react
Advanced tools
@captchafox/react - npm Package Compare versions
Comparing version 1.2.0 to 1.3.0
@@ -51,3 +51,3 @@ "use client"; | ||
| var CaptchaFox = forwardRef( | ||
| ({ sitekey, lang, mode, className, onError, onVerify, onLoad, onFail, onClose }, ref) => { | ||
| ({ sitekey, lang, mode, theme, className, onError, onVerify, onLoad, onFail, onClose }, ref) => { | ||
| const [containerRef, setContainerRef] = useState(); | ||
@@ -101,2 +101,3 @@ const [widgetId, setWidgetId] = useState(); | ||
| mode, | ||
| theme, | ||
| onError, | ||
@@ -114,16 +115,16 @@ onFail, | ||
| if (firstRendered.current) { | ||
| if (!isApiReady()) { | ||
| return; | ||
| } | ||
| renderCaptcha(); | ||
| } | ||
| loadCaptchaScript().then(() => __async(void 0, null, function* () { | ||
| if (isApiReady()) { | ||
| renderCaptcha(); | ||
| firstRendered.current = true; | ||
| yield renderCaptcha(); | ||
| } | ||
| } else { | ||
| loadCaptchaScript().then(() => __async(void 0, null, function* () { | ||
| if (isApiReady()) { | ||
| firstRendered.current = true; | ||
| yield renderCaptcha(); | ||
| } | ||
| })).catch((err) => { | ||
| onError == null ? void 0 : onError(err); | ||
| console.error("[CaptchaFox] Could not load script:", err); | ||
| }); | ||
| } | ||
| })).catch((err) => { | ||
| onError == null ? void 0 : onError(err); | ||
| console.error("[CaptchaFox] Could not load script:", err); | ||
| }); | ||
| }, [containerRef, sitekey, lang, mode]); | ||
@@ -130,0 +131,0 @@ return /* @__PURE__ */ React.createElement("div", { ref: setContainerRef, id: widgetId, className }); |
| { | ||
| "name": "@captchafox/react", | ||
| "version": "1.2.0", | ||
| "version": "1.3.0", | ||
| "main": "./dist/index.cjs", | ||
@@ -38,3 +38,3 @@ "module": "./dist/index.js", | ||
| "dependencies": { | ||
| "@captchafox/types": "^1.1.0" | ||
| "@captchafox/types": "^1.2.0" | ||
| }, | ||
@@ -44,6 +44,6 @@ "devDependencies": { | ||
| "@captchafox/internal": "*", | ||
| "@jest/globals": "^29.7.0", | ||
| "@testing-library/react": "^14.0.0", | ||
| "@testing-library/user-event": "^14.5.1", | ||
| "@testing-library/jest-dom": "^6.1.3", | ||
| "@types/jest": "^29.5.5", | ||
| "@types/react": "^18.2.25", | ||
@@ -50,0 +50,0 @@ "@types/react-dom": "^18.2.11", |
@@ -21,9 +21,13 @@ # @captchafox/react | ||
| ```sh | ||
| bun add @captchafox/react | ||
| ``` | ||
| ## Usage | ||
| ```tsx | ||
| import { CaptchaFox } from '@captchafox/react' | ||
| import { CaptchaFox } from '@captchafox/react'; | ||
| function Example() { | ||
| return <CaptchaFox sitekey="sk_11111111000000001111111100000000" /> | ||
| return <CaptchaFox sitekey="sk_11111111000000001111111100000000" />; | ||
| } | ||
@@ -34,12 +38,13 @@ ``` | ||
| | **Prop** | **Type** | **Description** | **Required** | | ||
| | -------- | ----------------------- | ------------------------------------------------------------------------------- | ------------ | | ||
| | sitekey | `string` | The sitekey for the widget | ✅ | | ||
| | lang | `string` | The language the widget should display. Defaults to automatically detecting it. | | | ||
| | mode | `inline\|popup\|hidden` | The mode the widget should be displayed in . | | | ||
| | onVerify | `function` | Called with the response token after successful verification. | | | ||
| | onFail | `function` | Called after unsuccessful verification. | | | ||
| | onError | `function` | Called when an error occured. | | | ||
| | onExpire | `function` | Called when the challenge expires. | | | ||
| | onClose | `function` | Called when the challenge was closed. | | | ||
| | **Prop** | **Type** | **Description** | **Required** | | ||
| | -------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------ | | ||
| | sitekey | `string` | The sitekey for the widget | ✅ | | ||
| | lang | `string` | The language the widget should display. Defaults to automatically detecting it. | | | ||
| | mode | `inline\|popup\|hidden` | The mode the widget should be displayed in . | | | ||
| | theme | `light` \| `dark` \| [`ThemeDefinition`](https://docs.captchafox.com/theming#custom-theme) | The theme of the widget. Defaults to light. | | ||
| | onVerify | `function` | Called with the response token after successful verification. | | | ||
| | onFail | `function` | Called after unsuccessful verification. | | | ||
| | onError | `function` | Called when an error occured. | | | ||
| | onExpire | `function` | Called when the challenge expires. | | | ||
| | onClose | `function` | Called when the challenge was closed. | | | ||
@@ -49,19 +54,14 @@ ### Using the verification callback | ||
| ```jsx | ||
| import { CaptchaFox, CAPTCHA_RESPONSE_KEY } from '@captchafox/react' | ||
| import { CaptchaFox, CAPTCHA_RESPONSE_KEY } from '@captchafox/react'; | ||
| function Example() { | ||
| const handleVerify = (token: string) => { | ||
| // do something with the token here (e.g. submit the form) | ||
| const formData = { | ||
| // your form data | ||
| [CAPTCHA_RESPONSE_KEY]: token | ||
| }; | ||
| } | ||
| const handleVerify = (token: string) => { | ||
| // do something with the token here (e.g. submit the form) | ||
| const formData = { | ||
| // your form data | ||
| [CAPTCHA_RESPONSE_KEY]: token | ||
| }; | ||
| }; | ||
| return ( | ||
| <CaptchaFox | ||
| sitekey="sk_11111111000000001111111100000000" | ||
| onVerify={handleVerify} | ||
| /> | ||
| ) | ||
| return <CaptchaFox sitekey="sk_11111111000000001111111100000000" onVerify={handleVerify} />; | ||
| } | ||
@@ -97,1 +97,3 @@ ``` | ||
| ``` | ||
| You can find more detailed examples in the [GitHub repository](https://github.com/CaptchaFox/javascript-integrations/tree/main/examples/react). |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
17222
6.11%- Lines of code
316
0.64%- Number of lines in readme file
96
2.13%Dependency changes
Updated
@captchafox/types@^1.2.0