Skip to main content

​
Package Manager Installation

Install @marsidev/react-turnstile using your preferred package manager: 
npm install @marsidev/react-turnstile

​
Peer Dependencies

React Turnstile requires React and React DOM as peer dependencies. The package supports:
  • React: ^17.0.2 || ^18.0.0 || ^19.0
  • React DOM: ^17.0.2 || ^18.0.0 || ^19.0
If you’re using a modern React application framework like Next.js, Create React App, or Vite, these dependencies are already included in your project.

​
Verify Installation

After installation, verify that the package is correctly installed by checking your package.json:
package.json
{
  "dependencies": {
    "@marsidev/react-turnstile": "^1.4.2",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

​
TypeScript Support

React Turnstile is written in TypeScript and includes built-in type definitions. No additional @types packages are required.
Type definitions are automatically available when you import the package:
import { Turnstile, TurnstileInstance, TurnstileProps } from '@marsidev/react-turnstile'

​
What’s Included

The package exports:
  • Turnstile - Main React component for rendering Turnstile widgets
  • TypeScript types - Complete type definitions for all props and API methods
  • Constants - Default configuration values like DEFAULT_CONTAINER_ID, DEFAULT_SCRIPT_ID
  • ESM module - Modern ES module format for optimal tree-shaking

​
Next Steps

Once installed, you’re ready to integrate Turnstile into your application:

Quickstart

Get your first Turnstile widget up and running in minutes

Basic Usage

Learn the fundamentals of using the Turnstile component
Important: Before you can use Turnstile in production, you need to obtain a site key and secret key from Cloudflare. See the Quickstart guide for instructions.

Build docs developers (and LLMs) love

Get started for freeTalk to us