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.

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.

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

License

Published under the MIT License.