## Features
* 🕵️♀️ **Privacy-first** - No user tracking, no cookies, GDPR-friendly by design
* 📦 **Lightweight** - Only 6.3 KB minified
* 💪 **Smart verification** - Often invisible to users with minimal interaction
* 💉 **Zero config** - Automatic script injection, works out of the box
* 📐 **Multiple widget sizes** - normal, compact, flexible, invisible
* 🎮 **Imperative API** - Control via ref: `reset()`, `execute()`, `getResponse()`, `isExpired()`
* ⚡️ **SSR ready** - Works with Next.js, Remix, and any React SSR framework
* 💻 **Full TypeScript support**
### **[📖 Read the docs →](https://docs.page/marsidev/react-turnstile/)** **[🚀 See the demo →](https://react-turnstile.vercel.app/)**
## Getting started
1. [Follow these steps](https://developers.cloudflare.com/turnstile/get-started/) to obtain a free site key and secret key from Cloudflare.
2. Install `@marsidev/react-turnstile` into your React project.
```bash
pnpm add @marsidev/react-turnstile
```
## Usage
### Basic
```jsx
import { Turnstile } from '@marsidev/react-turnstile'
function Widget() {
return
}
```
### With form and imperative API
```tsx
import { Turnstile } from '@marsidev/react-turnstile'
import type { TurnstileInstance } from '@marsidev/react-turnstile'
import { useRef } from 'react'
function LoginForm() {
const turnstileRef = useRef(null)
async function handleSubmit(e: FormEvent) {
e.preventDefault()
const token = turnstileRef.current?.getResponse()
// Send token to your server...
turnstileRef.current?.reset() // Reset after submission
}
return (
)
}
```
## 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](https://github.com/marsidev/react-turnstile/issues/new).
## Development
* [Fork](https://github.com/marsidev/react-turnstile/fork) or clone this repository.
* Install dependencies with `pnpm install`.
* Run `pnpm dev` to start both the library (with HMR) and the Next.js demo app concurrently
For reference, the project structure is as follows:
```
.
├── packages/lib/ # Library source code
├── demos/nextjs/ # Next.js demo app
└── docs/ # Documentation
```
## Support
If you find this library useful, you can buy me a coffee:
## Contributors
## License
Published under the [MIT License](./LICENCE).
