@captchafox/react

@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 .
theme	light | dark | ThemeDefinition	The theme of the widget. Defaults to light.
nonce	string	Randomly generated nonce .
i18n	object	Custom i18n configuration.
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.