react-turnstile
App.tsx
import { Turnstile } from "@marsidev/react-turnstile";

function MyForm() {
  const handleVerify = (token: string) => {
    console.log("Verified! Token:", token);
  }

  return (
    <form>
      {/* your form inputs */}
      <Turnstile
        siteKey="your-site-key"
        onSuccess={handleVerify}
      />
    </form>
  );
}

@marsidev/react-turnstile

The modern, CAPTCHA-free human verification for React

A lightweight, fully-typed React wrapper for Cloudflare Turnstile — helping you build better user experiences without frustrating CAPTCHA puzzles.

Get Started GitHubLive Demo
NPM Version
License

Easy Integration

Simple setup with Cloudflare Turnstile

Fully Typed

Built for React with complete TypeScript support

Customizable

Themes, sizes, and behaviors

Imperative API

Full control via React refs

Form-Friendly

Perfect for login, signup, and more

Examples & Demos

Live demos to help you get started

Powerful Features, Simple API

Everything you need to implement Cloudflare Turnstile in your React applications with minimal effort and maximum flexibility.

Easy Integration

Drop the component into your React app and you're good to go. No complex setup required.

Example.tsx
import { Turnstile } from "@marsidev/react-turnstile";

function LoginForm() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const token = turnstileRef.current?.getResponse();
    // Use token in your API request
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input type="email" placeholder="Email" />
      <input type="password" placeholder="Password" />
      <Turnstile siteKey="YOUR_SITE_KEY" />
      <button type="submit">Log in</button>
    </form>
  );
}

Ready to add human verification to your React app?

Read the DocumentationView on GitHub

Complete API Reference

Everything you need to know about the props and options available in the @marsidev/react-turnstile package

Turnstile Component Props

Props for the main Turnstile component
PropTypeDefaultDescription
siteKey*string-Your Cloudflare Turnstile site key
onSuccess(token: string) => void-Callback function executed when verification succeeds
onError() => void-Callback function executed when an error occurs
onExpire() => void-Callback function executed when the token expires
onTimeout() => void-Callback function executed when verification times out
onUnsupported() => void-Called when the client doesn't support Turnstile
onWidgetLoad(id: string) => void-Executes after the widget finishes loading
optionsTurnstileOptions{}Widget customization options (theme, size, language, etc.)
scriptOptionsScriptOptions{}Options for script loading (nonce, defer, appendTo)
asstringdivHTML tag for the widget container
injectScriptbooleantrueWhether to automatically load the Turnstile script
refRef<TurnstileInstance>-Access to widget imperative methods
View Full Documentation

Frequently Asked Questions

Everything you need to know about using @marsidev/react-turnstile in your projects

Still have questions about react-turnstile?

Ask on GitHubView Full Documentation

Better verification experience
for your React applications

Say goodbye to frustrating CAPTCHAs and hello to seamless, user-friendly verification. Start building better user experiences today.

Get Started NowStar on GitHub
✓ TypeScript ready
✓ Next.js compatible
✓ MIT licensed
✓ Lightweight

Installation: npm install @marsidev/react-turnstile