Package Exports

@captchafox/react
@captchafox/react/dist/index.js
@captchafox/react/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@captchafox/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@captchafox/react

Installation

Install the library using your prefered package manager

npm install @captchafox/react

yarn add @captchafox/react

pnpm 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	✅
lng	`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 if an error occured
onExpire	`function`	Called if the challenge expired
onClose	`function`	Called if 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>
    )
}