react-turnstile

A very simple React library for Cloudflare Turnstile.

Installation

``sh
npm i react-turnstile
`

Usage

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

// ...

function TurnstileWidget() {
const turnstile = useTurnstile();
return (
sitekey="1x00000000000000000000AA"
onVerify={(token) => {
fetch("/login", {
method: "POST",
body: JSON.stringify({ token }),
}).then((response) => {
if (!response.ok) turnstile.reset();
});
}}
/>
);
}
`

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

$3

The turnstile iframe initially loads as invisible before becoming visible and
expanding to the expected widget size.

This causes Layout Shift and reduces your Cumulative Layout Shift score and UX.

This can be fixed with the fixedSize={true} option, which will force the
wrapper div to be the specific size of turnstile.

$3

The Bound Turnstile Object is given as argument to all callbacks and allows you
to call certain window.turnstile functions without having to store the widgetId
yourself.

`js
function Component() {
return (
execution="execute"
onLoad={(widgetId, bound) => {
// before:
window.turnstile.execute(widgetId);
// now:
bound.execute();
}}
/>
);
}
`

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" |
| language | string | override the language used by turnstile |
| tabIndex | number | - |
| responseField | boolean | controls generation of element |
| responseFieldName | string | changes the name of element |
| size | string | one of "normal", "compact", "flexible" |
| fixedSize | boolean | fix the size of the