fix: Fix script injection issues

Fix #32

Author: marsidev

packages/lib/src/lib.tsx

@@ -45,9 +45,9 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
 	const scriptLoaded = useObserveScript(scriptId)
 	const containerId = id ?? DEFAULT_CONTAINER_ID
 
-	const onLoadCallbackName = `${
-		scriptOptions?.onLoadCallbackName || DEFAULT_ONLOAD_NAME
-	}#${containerId}`
+	const onLoadCallbackName = scriptOptions?.onLoadCallbackName
+		? `${scriptOptions.onLoadCallbackName}#${containerId}`
+		: DEFAULT_ONLOAD_NAME
 
 	const renderConfig = useMemo(
 		(): RenderOptions => ({
@@ -187,10 +187,10 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
 	and set turnstileLoaded to true. Different from the case when handle the injection,
 	where we set turnstileLoaded in the script.onload callback */
 	useEffect(() => {
-		if (!injectScript && scriptLoaded && !turnstileLoaded && window.turnstile) {
+		if (scriptLoaded && !turnstileLoaded && window.turnstile) {
 			setTurnstileLoaded(true)
 		}
-	}, [injectScript, turnstileLoaded, scriptLoaded])
+	}, [turnstileLoaded, scriptLoaded])
 
 	useEffect(() => {
 		if (!siteKey) {

packages/lib/src/use-observe-script.ts

@@ -6,8 +6,7 @@ export default function useObserveScript(scriptId = DEFAULT_SCRIPT_ID) {
 
 	useEffect(() => {
 		const checkScriptExists = () => {
-			const script = isScriptInjected(scriptId)
-			if (script) {
+			if (isScriptInjected(scriptId)) {
 				setScriptLoaded(true)
 			}
 		}

packages/lib/src/utils.ts

@@ -2,8 +2,8 @@ import { ContainerSizeSet, InjectTurnstileScriptParams, RenderOptions } from './
 
 export const SCRIPT_URL = 'https://challenges.cloudflare.com/turnstile/v0/api.js'
 export const DEFAULT_SCRIPT_ID = 'cf-turnstile-script'
-export const DEFAULT_ONLOAD_NAME = 'onloadTurnstileCallback'
 export const DEFAULT_CONTAINER_ID = 'cf-turnstile'
+export const DEFAULT_ONLOAD_NAME = `onloadTurnstileCallback#${DEFAULT_CONTAINER_ID}`
 
 /**
  * Function to check if script has already been injected
@@ -26,6 +26,10 @@ export const injectTurnstileScript = ({
 }: InjectTurnstileScriptParams) => {
 	const scriptId = id || DEFAULT_SCRIPT_ID
 
+	if (isScriptInjected(scriptId)) {
+		return
+	}
+
 	const script = document.createElement('script')
 	script.id = scriptId