React Turnstile

Cloudflare Turnstile widget

Cloudflare Turnstile integration for React.

unpacked size npm bundle size
## 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 npm i @marsidev/react-turnstile -E ``` ## 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 (
) } ``` ## Star history [![Star History Chart](https://api.star-history.com/svg?repos=marsidev/react-turnstile&type=Date)](https://star-history.com/#marsidev/react-turnstile&Date) ## 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: Buy Me a Coffee at ko-fi.com ## Contributors Contributors ## License Published under the [MIT License](./LICENCE).