React-cf-turnstile NPM

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

npm i react-cf-turnstile

yarn 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.

import React from 'react';
import CFTurnstile from 'react-cf-turnstile';

function App() {
  return (
    <CFTurnstile
      siteKey="1x00000000000000000000AA" // change me! testing only
      action="FORM_SUBMIT" // optional: used in analytics to differentiate between different turnstiles on the same site
      cData="some data" // optional: read cloudflare docs for more info
      callback={(token) => { // called when challenge is completed successfully
        console.log(token);
      }}
      expired-callback={() => { // optional: called when a challenge expires
        console.log('expired');
      }}
      error-callback={(error) => { // optional: called when an error occurs
          console.error(error);
      }}
      theme="light" // optional: light/dark/auto
      tabindex="0" // optional: tabindex for the iframe for accessibility
    />
  );
}