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

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

``bash
npm i @marsidev/react-turnstile
`

Usage

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

function Widget() {
return
}
`

> 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

* nuxt-turnstile
* svelte-turnstile
* react-google-recaptcha-v3
* reaptcha

Support

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

License

Published under the MIT License.