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'
/>
</>
)
}
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'
/>
</>
)
}
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.