npm.io
1.7.0 • Published 1 month ago

@captchafox/solid

Licence
MIT
Version
1.7.0
Deps
1
Size
16 kB
Vulns
0
Weekly
0
Stars
8
SummaryDependencyVersions

@captchafox/solid

NPM version

Installation

Install the library using your prefered package manager

npm install @captchafox/solid
yarn add @captchafox/solid
pnpm add @captchafox/solid
bun add @captchafox/solid

Usage

import { CaptchaFox } from '@captchafox/solid';

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/solid';

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 { CaptchaFox, CaptchaFoxInstance } from '@captchafox/solid'

function Example() {
    let captchaRef: CaptchaFoxInstance;

    const triggerAction = async () => {
        // execute the captcha
        try {
            const token = await captchaRef.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.

Keywords

solidcaptchafox