1.1.5 • Published 4 months ago

react-cloudflare-turnstile v1.1.5

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

React Cloudflare Turnstile

A simple and lightweight React component for Cloudflare's Turnstile.

Installation

npm i react-cloudflare-turnstile

Basic Usage

import Turnstile from "react-cloudflare-turnstile";

function MyComponent() {
    // ...
    return (
        <Turnstile
            turnstileSiteKey={"YOUR_CLOUDFLARE_TURNSTILE_SITE_KEY"}
            callback={(token) => {
                // save the token, validate it server-side
            }}
        />
    );
}

Advanced Usage

Learn more about these Advanced Usage props here:\ https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#configurations

import Turnstile from "react-cloudflare-turnstile";

function MyComponent() {
    // ...
    return (
        <Turnstile
            turnstileSiteKey={"YOUR_CLOUDFLARE_TURNSTILE_SITE_KEY"}
            callback={(token) => {
                // save the token, validate it server-side
            }}
            // =====================================
            // ADVANCED USAGE PROPS BELOW (OPTIONAL)
            // =====================================
            theme={"auto"} // ("auto" | "light" | "dark")
            size={"normal"} // ("normal" | "flexible" | "compact")
            execution={"render"} // ("execute" | "render")
            action={"WIDGET_IDENTIFIER"} // (string)
            cData={"CUSTOMER_DATA"} // (string)
            language={"auto"} // ("auto" | "en-US" | ...)
            tabIndex={0} // (number)
            responseField={true} // (boolean)
            responseFieldName={"cf-turnstile-response"} // (string)
            retry={"auto"} // ("auto" | "never")
            retryInterval={8000} // (number)
            refreshExpired={"auto"} // ("auto" | "manual" | "never")
            refreshTimeout={"auto"} // ("auto" | "manual" | "never")
            beforeInteractiveCallback={() => {
                // ...
            }}
            afterInteractiveCallback={() => {
                // ...
            }}
            unsupportedCallback={() => {
                // ...
            }}
            errorCallback={(error) => {
                // ...
            }}
            expiredCallback={(token) => {
                // ...
                // NOTE: if no callback is passed,
                // we set a "fallback" expiredCallback
                // as a convenience that...
                // 1.) Executes your callback with an
                //     empty string token
                // 2.) Resets the Turnstile
            }}
        />
    );
}
1.1.5

4 months ago

1.1.4

4 months ago

1.1.2

4 months ago

1.1.1

4 months ago

1.0.16

4 months ago

1.0.15

4 months ago

1.0.14

4 months ago

1.0.13

4 months ago

1.0.12

4 months ago

1.0.11

4 months ago

1.0.9

4 months ago

1.0.8

4 months ago

1.0.7

4 months ago

1.0.6

4 months ago

1.0.5

4 months ago

1.0.4

4 months ago

1.0.3

4 months ago

1.0.2

4 months ago

1.0.1

4 months ago

1.0.0

5 months ago