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>
);
}
A lightweight, fully-typed React wrapper for Cloudflare Turnstile — helping you build better user experiences without frustrating CAPTCHA puzzles.
Simple setup with Cloudflare Turnstile
Built for React with complete TypeScript support
Themes, sizes, and behaviors
Full control via React refs
Perfect for login, signup, and more
Live demos to help you get started
Everything you need to implement Cloudflare Turnstile in your React applications with minimal effort and maximum flexibility.
Drop the component into your React app and you're good to go. No complex setup required.
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?
Everything you need to know about the props and options available in the @marsidev/react-turnstile package
Prop | Type | Default | Description |
---|---|---|---|
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 |
options | TurnstileOptions | {} | Widget customization options (theme, size, language, etc.) |
scriptOptions | ScriptOptions | {} | Options for script loading (nonce, defer, appendTo) |
as | string | div | HTML tag for the widget container |
injectScript | boolean | true | Whether to automatically load the Turnstile script |
ref | Ref<TurnstileInstance> | - | Access to widget imperative methods |
Everything you need to know about using @marsidev/react-turnstile in your projects
Still have questions about react-turnstile?
Say goodbye to frustrating CAPTCHAs and hello to seamless, user-friendly verification.
Start building better user experiences today.
Installation: npm install @marsidev/react-turnstile