@captchafox/react
Installation
Install the library using your prefered package manager
npm install @captchafox/react
yarn add @captchafox/react
pnpm add @captchafox/react
bun add @captchafox/react
Usage
import { CaptchaFox } from '@captchafox/react';
function Example() {
return <CaptchaFox sitekey="sk_11111111000000001111111100000000" />;
}
Props
| 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 . | |
| start | none|auto|focus | Controls when the verification begins. Defaults to none. | |
| theme | light | dark | ThemeDefinition | The theme of the widget. Defaults to light. | |
| nonce | string | Randomly generated nonce . | |
| i18n | object | Custom i18n configuration. | |
| hideClose | boolean | Hides the close button and prevents users from closing the widget modal. | |
| 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. |
Using the verification callback
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
};
};
return <CaptchaFox sitekey="sk_11111111000000001111111100000000" onVerify={handleVerify} />;
}
Interacting with the instance
import { useRef } from 'react'
import { CaptchaFox, CaptchaFoxInstance } from '@captchafox/react'
function Example() {
const captchaRef = useRef<CaptchaFoxInstance | null>(null);
const triggerAction = async () => {
// execute the captcha
try {
const token = await captchaRef.current?.execute()
} catch {
// unsuccessful verification
}
}
return (
<CaptchaFox
sitekey="sk_11111111000000001111111100000000"
ref={captchaRef}
/>
<button onClick={triggerAction}>Action</button>
)
}
You can find more detailed examples in the GitHub repository.