Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ben754444/react-cf-turnstile
A React library for Cloudflare Turnstile
https://github.com/ben754444/react-cf-turnstile
cloudflare react turnstile
Last synced: 13 days ago
JSON representation
A React library for Cloudflare Turnstile
- Host: GitHub
- URL: https://github.com/ben754444/react-cf-turnstile
- Owner: Ben754444
- License: mit
- Created: 2022-09-29T21:46:45.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-11-24T22:14:44.000Z (about 2 years ago)
- Last Synced: 2024-04-26T01:20:54.721Z (10 months ago)
- Topics: cloudflare, react, turnstile
- Language: TypeScript
- Homepage:
- Size: 11.7 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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 (
{ // 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
```