# react-cf-turnstile

> A React library for Cloudflare Turnstile (https://www.cloudflare.com/en-gb/products/turnstile/)

Latest version **1.0.2** (published 2022-10-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-cf-turnstile
pnpm add react-cf-turnstile
yarn add react-cf-turnstile
bun add react-cf-turnstile
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-10-05 |
| First published | 2022-09-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 23.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Ben754444 |
| Maintainers | ben754444 |

## Links

- npm: https://www.npmjs.com/package/react-cf-turnstile
- Repository: https://github.com/ben754444/react-cf-turnstile
- Homepage: https://github.com/ben754444/react-cf-turnstile#readme
- Issues: https://github.com/ben754444/react-cf-turnstile/issues
- npm.io page: https://npm.io/package/react-cf-turnstile

## Recent versions

- 1.0.2 (latest) — 2022-10-05
- 1.0.2-dev.1 (dev) — 2022-10-05
- 1.0.1 — 2022-09-30
- 1.0.0 — 2022-09-30
- 1.0.0-dev.2 — 2022-09-30
- 0.1.0 — 2022-09-30
- 0.0.6 — 2022-09-30
- 0.0.5 — 2022-09-30
- 0.0.4 — 2022-09-30
- 0.0.3 — 2022-09-30
- 0.0.2 — 2022-09-30
- 0.0.1 — 2022-09-30

## README

# 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](https://developers.cloudflare.com/turnstile/).

## Installation

```bash
npm i react-cf-turnstile
```
```bash
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.

```tsx
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
    />
  );
}
```

## Feeling experimental? Grab the latest dev build

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

```bash
npm i react-cf-turnstile@dev
```
```bash
yarn add react-cf-turnstile@dev
```

---
_Source: https://npm.io/package/react-cf-turnstile · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._