Skip to main content

​
Overview

The <Turnstile /> component is the primary export of @marsidev/react-turnstile. It renders a Cloudflare Turnstile widget in your React application.

​
Import

import Turnstile from '@marsidev/react-turnstile'
// or
import { Turnstile } from '@marsidev/react-turnstile'

​
Component Signature

const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProps>(
  (props, ref) => { /* ... */ }
)

​
Props

The component accepts all props defined in the TurnstileProps interface, which extends React.HTMLAttributes<HTMLDivElement>. See the Turnstile Props reference for complete documentation of all available props.

​
Ref Methods

When using useRef or createRef, you gain access to imperative methods via the TurnstileInstance interface. See the Turnstile Instance reference for all available methods.

​
Basic Usage

import Turnstile from '@marsidev/react-turnstile'

function MyForm() {
  return (
    <form>
      <Turnstile siteKey="your-site-key" />
      <button type="submit">Submit</button>
    </form>
  )
}

​
With Ref

import { useRef } from 'react'
import Turnstile from '@marsidev/react-turnstile'
import type { TurnstileInstance } from '@marsidev/react-turnstile'

function MyForm() {
  const turnstileRef = useRef<TurnstileInstance>(null)

  const handleSubmit = async () => {
    const token = await turnstileRef.current?.getResponsePromise()
    // Validate token on your server
  }

  return (
    <form onSubmit={handleSubmit}>
      <Turnstile ref={turnstileRef} siteKey="your-site-key" />
      <button type="submit">Submit</button>
    </form>
  )
}

Build docs developers (and LLMs) love

Get started for freeTalk to us