Manual script injection

Sometimes you may want to manually inject the Turnstile script into your application. You need to set the injectScript property to false to do it.

The following example shows how to manually inject the Turnstile script into a Next.js project:

import {
  DEFAULT_ONLOAD_NAME,
  DEFAULT_SCRIPT_ID,
  SCRIPT_URL,
  Turnstile
} from '@marsidev/react-turnstile'
import Script from 'next/script'

export default function Widget() {
  return (
    <>
      <Script
        id={DEFAULT_SCRIPT_ID}
        src={SCRIPT_URL}
        strategy="beforeInteractive"
      />

      <Turnstile
        injectScript={false}
        siteKey='1x00000000000000000000AA'
      />
    </>
  )
}

import {
  DEFAULT_ONLOAD_NAME,
  DEFAULT_SCRIPT_ID,
  SCRIPT_URL,
  Turnstile
} from '@marsidev/react-turnstile'
import Script from 'next/script'

export default function Widget() {
  return (
    <>
      <Script
        id={DEFAULT_SCRIPT_ID}
        src={SCRIPT_URL}
        strategy="beforeInteractive"
      />

      <Turnstile
        injectScript={false}
        siteKey='1x00000000000000000000AA'
      />
    </>
  )
}

If you want to use a custom script ID:

import { SCRIPT_URL, Turnstile } from '@marsidev/react-turnstile'
import Script from 'next/script'

export default function Widget() {
  return (
    <>
      <Script
        id="turnstile-script"
        src={SCRIPT_URL}
        strategy="beforeInteractive"
      />

      <Turnstile
        injectScript={false}
        scriptOptions={{ id: 'turnstile-script' }}
        siteKey='1x00000000000000000000AA'
      />
    </>
  )
}

import { SCRIPT_URL, Turnstile } from '@marsidev/react-turnstile'
import Script from 'next/script'

export default function Widget() {
  return (
    <>
      <Script
        id="turnstile-script"
        src={SCRIPT_URL}
        strategy="beforeInteractive"
      />

      <Turnstile
        injectScript={false}
        scriptOptions={{ id: 'turnstile-script' }}
        siteKey='1x00000000000000000000AA'
      />
    </>
  )
}

When manually injecting the script, the only valid property for scriptOptions is the id, and it needs to match the ID of the script tag.

Examples

Manual script injection