# @marsidev/react-turnstile

> Cloudflare Turnstile integration for React.

Latest version **1.6.1** (published 2026-08-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @marsidev/react-turnstile
pnpm add @marsidev/react-turnstile
yarn add @marsidev/react-turnstile
bun add @marsidev/react-turnstile
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.6.1 |
| Published | 2026-08-26 |
| First published | 2022-10-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 73.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 845 |
| Author | Luis Marsiglia <marsiglia.business@gmail.com> |
| Maintainers | marsidev |
| Keywords | cloudflare, cloudflare-turnstile, react, tanstack-intent, turnstile |

## Links

- npm: https://www.npmjs.com/package/@marsidev/react-turnstile
- Repository: https://github.com/marsidev/react-turnstile
- Issues: https://github.com/marsidev/react-turnstile/issues
- npm.io page: https://npm.io/package/@marsidev/react-turnstile

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.6.1 (latest) — 2026-08-26
- 1.6.0 — 2026-08-11
- 1.5.5 — 2026-08-05
- 1.5.4 — 2026-07-27
- 1.5.3 — 2026-06-09
- 1.5.2 — 2026-05-05
- 1.5.1 — 2026-04-26
- 1.5.0 — 2026-03-28
- 1.4.2 — 2026-02-04
- 1.4.1 — 2025-12-28
- 1.4.0 — 2025-12-08
- 1.3.1 — 2025-09-15
- 1.3.0 — 2025-08-05
- 1.2.0 — 2025-08-01
- 1.1.0 — 2024-11-18
- … 34 more at https://npm.io/package/@marsidev/react-turnstile/versions

## README

<div align="center">
 <h1>React Turnstile</h1>
 <img src="https://raw.githubusercontent.com/marsidev/react-turnstile/main/preview.png" width="300" alt="Cloudflare Turnstile widget" />
 <p>Cloudflare Turnstile integration for React.</p>
 <a href="https://npmx.dev/package/@marsidev/react-turnstile">
  <img src="https://nodei.co/npm/@marsidev/react-turnstile.svg?style=shields&data=v,u,d&color=%23f58d1a">
 </a>
 <img src="https://img.shields.io/npm/unpacked-size/%40marsidev%2Freact-turnstile?style=square-flat&color=f58d1a" alt="unpacked size" />
 <img src="https://img.shields.io/bundlephobia/minzip/%40marsidev%2Freact-turnstile?style=square-flat&color=f58d1a" alt="npm bundle size" />
 <a href="https://socket.dev/npm/package/@marsidev/react-turnstile">
  <img src="https://socket.dev/api/badge/npm/package/@marsidev/react-turnstile" alt="Socket Score" />
 </a>
</div>

## 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 <Turnstile siteKey='1x00000000000000000000AA' />
}
```

### 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<TurnstileInstance | null>(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 (
    <form onSubmit={handleSubmit}>
      <input type="email" placeholder="Email" />
      <input type="password" placeholder="Password" />
      <Turnstile
        ref={turnstileRef}
        siteKey='1x00000000000000000000AA'
      />
      <button type="submit">Login</button>
    </form>
  )
}
```

## Star History

<a href="https://www.star-history.com/?type=date&repos=marsidev%2Freact-turnstile">
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=marsidev/react-turnstile&type=date&theme=dark&legend=top-left&sealed_token=KQdjIGHECVHvmhDa4RwnH3fMkCaF_n21hbERbJPn3mr2iN2BTUntMVwDF0vgTrLcZBAZVsk7PrQJLzvv9S7Sfr6mWDUf3EIQqf8po7tzK1x8CtUsb-_L9y9awseOecUW_cpT-eaNROn_eH-xOzh7TEQDjpj-5oQTttxF9aUCdGvBnhk7VdMKkBIn-73z" />
   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=marsidev/react-turnstile&type=date&legend=top-left&sealed_token=KQdjIGHECVHvmhDa4RwnH3fMkCaF_n21hbERbJPn3mr2iN2BTUntMVwDF0vgTrLcZBAZVsk7PrQJLzvv9S7Sfr6mWDUf3EIQqf8po7tzK1x8CtUsb-_L9y9awseOecUW_cpT-eaNROn_eH-xOzh7TEQDjpj-5oQTttxF9aUCdGvBnhk7VdMKkBIn-73z" />
   <img alt="Star History Chart" src="https://api.star-history.com/chart?repos=marsidev/react-turnstile&type=date&legend=top-left&sealed_token=KQdjIGHECVHvmhDa4RwnH3fMkCaF_n21hbERbJPn3mr2iN2BTUntMVwDF0vgTrLcZBAZVsk7PrQJLzvv9S7Sfr6mWDUf3EIQqf8po7tzK1x8CtUsb-_L9y9awseOecUW_cpT-eaNROn_eH-xOzh7TEQDjpj-5oQTttxF9aUCdGvBnhk7VdMKkBIn-73z" />
 </picture>
</a>

## 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:

<a href='https://ko-fi.com/K3K1D5PRI' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi2.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>

## Contributors

<a href="https://github.com/marsidev/react-turnstile/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=marsidev/react-turnstile" alt="Contributors" />
</a>

## License

Published under the [MIT License](./LICENSE).

---
_Source: https://npm.io/package/@marsidev/react-turnstile · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._