Skip to main content

​
Script Constants

These constants are exported from @marsidev/react-turnstile and can be used when manually managing the Turnstile script.

​
SCRIPT_URL

export const SCRIPT_URL = 'https://challenges.cloudflare.com/turnstile/v0/api.js'
The URL of the Cloudflare Turnstile API script. Usage: 
import { SCRIPT_URL } from '@marsidev/react-turnstile'

console.log(SCRIPT_URL)
// 'https://challenges.cloudflare.com/turnstile/v0/api.js'

​
DEFAULT_SCRIPT_ID

export const DEFAULT_SCRIPT_ID = 'cf-turnstile-script'
The default ID attribute for the injected script element. Usage: 
import { DEFAULT_SCRIPT_ID } from '@marsidev/react-turnstile'

const scriptElement = document.getElementById(DEFAULT_SCRIPT_ID)

​
DEFAULT_CONTAINER_ID

export const DEFAULT_CONTAINER_ID = 'cf-turnstile'
The default ID attribute for the Turnstile widget container. Usage: 
import { DEFAULT_CONTAINER_ID } from '@marsidev/react-turnstile'

const container = document.getElementById(DEFAULT_CONTAINER_ID)

​
DEFAULT_ONLOAD_NAME

export const DEFAULT_ONLOAD_NAME = 'onloadTurnstileCallback'
The default name for the global onload callback function. Usage: 
import { DEFAULT_ONLOAD_NAME } from '@marsidev/react-turnstile'

// The callback is registered as:
window[DEFAULT_ONLOAD_NAME] = () => {
  console.log('Turnstile loaded')
}

​
Type Definitions

​
Theme Types

type TurnstileTheme = 'auto' | 'light' | 'dark'
The theme of the Turnstile widget:
  • 'auto': Respects user’s system preference (default)
  • 'light': Light theme
  • 'dark': Dark theme

​
Widget Size Types

type WidgetSize = 'normal' | 'compact' | 'flexible' | 'invisible'
The size of the Turnstile widget:
  • 'normal': 300x65px (default)
  • 'compact': 150x140px
  • 'flexible': 100% width (min: 300px) x 65px
  • 'invisible': No visible widget

​
Appearance Mode Types

type AppearanceMode = 'always' | 'execute' | 'interaction-only'
Controls when the widget is visible:
  • 'always': Always visible (default)
  • 'execute': Only visible when executing
  • 'interaction-only': Only visible when interactivity is required

​
Execution Mode Types

type ExecutionMode = 'render' | 'execute'
Controls when to obtain the token:
  • 'render': Obtains token on render (default)
  • 'execute': Obtains token when .execute() is called

​
Retry Mode Types

type FailureRetryMode = 'never' | 'auto'
How to retry on widget failure:
  • 'auto': Automatically allows retry (default)
  • 'never': Never allows retry

​
Refresh Mode Types

type RefreshExpiredMode = 'never' | 'manual' | 'auto'
type RefreshTimeoutMode = 'never' | 'manual' | 'auto'
The refresh mode when token expires or widget times out:
  • 'auto': Automatically refresh (default)
  • 'manual': Prompt user with refresh button
  • 'never': Never refresh

​
Supported Languages

​
TurnstileLangCode

type TurnstileLangCode =
  | 'ar' | 'ar-EG'
  | 'cs'
  | 'da'
  | 'de'
  | 'el'
  | 'en'
  | 'es'
  | 'fa'
  | 'fi'
  | 'fr'
  | 'he'
  | 'hi'
  | 'hr'
  | 'hu'
  | 'id'
  | 'it'
  | 'ja'
  | 'ko'
  | 'lt'
  | 'nl'
  | 'ms'
  | 'nb'
  | 'pl'
  | 'pt' | 'pt-BR'
  | 'ro'
  | 'ru'
  | 'sk'
  | 'sl'
  | 'sr'
  | 'sv'
  | 'th'
  | 'tl'
  | 'tlh'
  | 'tr'
  | 'uk'
  | 'zh' | 'zh-CN' | 'zh-TW'
  | (string & {}) // Allows custom strings
Supported language codes for the Turnstile widget. The type also accepts any string for potential future languages. Common Languages:
  • 'en': English
  • 'es': Spanish
  • 'fr': French
  • 'de': German
  • 'ja': Japanese
  • 'zh-CN': Chinese (Simplified)
  • 'zh-TW': Chinese (Traditional)
  • 'pt-BR': Portuguese (Brazil)
  • 'ar': Arabic
  • 'hi': Hindi
  • 'ru': Russian
Usage: 
<Turnstile
  siteKey="your-site-key"
  options={{ language: 'es' }}
/>
See the Cloudflare documentation for the complete list of supported languages.

​
Container Style Constants

These constants are used internally but can be referenced: 
const CONTAINER_STYLE_SET = {
  normal: {
    width: 300,
    height: 65
  },
  compact: {
    width: 150,
    height: 140
  },
  invisible: {
    width: 0,
    height: 0,
    overflow: 'hidden'
  },
  flexible: {
    minWidth: 300,
    width: '100%',
    height: 65
  },
  interactionOnly: {
    width: 'fit-content',
    height: 'auto',
    display: 'flex'
  }
}

​
Import Examples

​
Import Constants

import {
  SCRIPT_URL,
  DEFAULT_SCRIPT_ID,
  DEFAULT_CONTAINER_ID,
  DEFAULT_ONLOAD_NAME
} from '@marsidev/react-turnstile'

​
Import Types

import type {
  TurnstileTheme,
  WidgetSize,
  AppearanceMode,
  ExecutionMode,
  FailureRetryMode,
  RefreshExpiredMode,
  RefreshTimeoutMode,
  TurnstileLangCode
} from '@marsidev/react-turnstile'

​
Import All Exports

import Turnstile, {
  // Component types
  TurnstileProps,
  TurnstileInstance,
  ComponentRenderOptions,
  ScriptOptions,
  
  // Server validation types
  TurnstileServerValidationResponse,
  TurnstileServerValidationErrorCode,
  
  // Enums and constants
  TurnstileTheme,
  WidgetSize,
  AppearanceMode,
  ExecutionMode,
  TurnstileLangCode,
  
  // Constants
  SCRIPT_URL,
  DEFAULT_SCRIPT_ID,
  DEFAULT_CONTAINER_ID,
  DEFAULT_ONLOAD_NAME
} from '@marsidev/react-turnstile'

Build docs developers (and LLMs) love

Get started for freeTalk to us