Cloudflare Turnstile React Library

This library provides a React component that can be used to protect your site from bots and scrapers using Cloudflare Turnstile.

Basic usage can be found at the Cloudflare Turnstile Documentation.

Installation

1npm i react-cf-turnstile

1yarn add react-cf-turnstile

Methods

Methods can be called using a reference. Passing the widget ID is not necessary.

Name	Description
renderTurnstile	Calls the turnstile.render() function
resetTurnstile	Can be used to reset the widget if it has expired or needs to be reloaded
removeTurnstile	Removes the widget
getResponse	soon™

Props

Name	Type	Required	Description
sitekey	string	yes	The sitekey associated with your widget configuration on the Cloudflare Dashboard
action	string		Information used in analytics to differentiate between widgets on the same site
cData	string		Payload used to attach customer data to the challenge which is returned upon validation
callback	callback	yes	Called when a challenge is successfully completed
expired-callback	callback		Called when a challenge expires
error-callback	callback		Called when there is a network error
theme	string		Theme of the widget. Can be light, dark or auto
tabindex	number		Tabindex of the iframe for accessibility purposes

Example

In this example, I use the demo only sitekey provided by Cloudflare. You should use your own sitekey in production.

1import React from 'react';
2import CFTurnstile from 'react-cf-turnstile';
3
4function App() {
5  return (
6    <CFTurnstile
7      siteKey="1x00000000000000000000AA" // change me! testing only
8      action="FORM_SUBMIT" // optional: used in analytics to differentiate between different turnstiles on the same site
9      cData="some data" // optional: read cloudflare docs for more info
10      callback={(token) => { // called when challenge is completed successfully
11        console.log(token);
12      }}
13      expired-callback={() => { // optional: called when a challenge expires
14        console.log('expired');
15      }}
16      error-callback={(error) => { // optional: called when an error occurs
17          console.error(error);
18      }}
19      theme="light" // optional: light/dark/auto
20      tabindex="0" // optional: tabindex for the iframe for accessibility
21    />
22  );
23}

Feeling experimental? Grab the latest dev build

Note: dev builds are not guaranteed to be stable and may contain breaking changes not clearly documented

1npm i react-cf-turnstile@dev

1yarn add react-cf-turnstile@dev