React Turnstile

Cloudflare Turnstile integration for React.

Features

💪 Smart verification with minimal user interaction
🕵️‍♀️ Privacy-focused approach
💉 Automatic script injection
⚡️ SSR ready
💻 TypeScript support

Docs | Demo

Getting started

Follow these steps to obtain a free site key and secret key from Cloudflare.
Install @marsidev/react-turnstile into your React project.

npm i @marsidev/react-turnstile

Usage

import { Turnstile } from '@marsidev/react-turnstile'

function Widget() {
  return <Turnstile siteKey='1x00000000000000000000AA' />
}

Checkout the docs for more examples and for a detailed info about the Turnstile props.

Checkout the demo for a live example.

Contributing

Any contributions are greatly appreciated. If you have a suggestion that would make this project better, please fork the repo and create a Pull Request. You can also open an issue.

Development

Fork or clone this repository.
Install dependencies with pnpm install.
You can use pnpm dev to start the demo page in dev mode, which also rebuild the library when file changes are detected in the packages/lib folder.

The library is written under the packages/lib folder, the demo page is under the demos/nextjs folder and the docs are under the docs folder.

Contributors

Credits

Inspired by

Support

If you like this project, please consider supporting it through a PayPal donation. 😊

License

Published under the MIT License.