react-hook-turnstile

A very simple React library for Cloudflare Turnstile.

Installation

npm i react-hook-turnstile

Usage

import Turnstile, { useTurnstile } from "react-hook-turnstile";

// ...

const { reset } = useTurnstile(); // Access turnstile reset method

function TurnstileWidget() {
  return (
    <Turnstile
      sitekey="1x00000000000000000000AA"
      onVerify={(token) => alert(token)}
    />
  );
}

Turnstile tokens expire after 5 minutes, to automatically reset the challenge once they expire, set the autoResetOnExpire prop to true or reset the widget yourself using the onExpire callback.

Documentation

Turnstile takes the following arguments:

| name | type | description | | ----------------- | ------- | ----------------------------------------------------- | | sitekey | string | sitekey of your website (REQUIRED) | | action | string | - | | cData | string | - | | theme | string | one of "light", "dark", "auto" | | tabIndex | number | - | | responseField | boolean | controls generation of <input /> element | | responseFieldName | string | changes the name of <input /> element | | retry | string | one of "auto", "never" | | retryInterval | number | interval of retries in ms | | autoResetOnExpire | boolean | automatically reset the widget when the token expires | | id | string | id of the div | | ref | Ref | custom react ref for the div | | className | string | passed to the div | | style | object | passed to the div |

And the following callbacks:

| name | arguments | description | | --------- | --------- | ------------------------------------------ | | onVerify | token | called when challenge is passed (REQUIRED) | | onLoad | widgetId | called when the widget is loaded | | onError | error | called when an error occurs | | onExpire | - | called when the token expires | | onTimeout | - | called when the challenge expires |

For more details on what each argument does, see the Cloudflare Documentation.