From 66f85201c6c6f7ff2d0fca772f67a01e76135124 Mon Sep 17 00:00:00 2001 From: Luis Marsiglia Date: Mon, 3 Jun 2024 15:59:02 -0400 Subject: [PATCH 1/4] fix: change script injection method --- docs/manual-script-injection.mdx | 2 +- docs/multiple-widgets.mdx | 33 +----- packages/lib/src/lib.tsx | 180 ++++++++++++++++-------------- packages/lib/src/utils.ts | 2 + packages/lib/test/index.test.tsx | 2 +- test/e2e/basic.test.ts | 12 +- test/e2e/browsers.test.ts | 4 +- test/e2e/multiple-widgets.test.ts | 3 +- 8 files changed, 112 insertions(+), 126 deletions(-) diff --git a/docs/manual-script-injection.mdx b/docs/manual-script-injection.mdx index 72e10ee..e9f11dc 100644 --- a/docs/manual-script-injection.mdx +++ b/docs/manual-script-injection.mdx @@ -115,5 +115,5 @@ If you want to use a custom script ID: - Note that the only `scriptOptions` property available when manually injecting the script is `id`. + 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. diff --git a/docs/multiple-widgets.mdx b/docs/multiple-widgets.mdx index 89d9498..ab8cd08 100644 --- a/docs/multiple-widgets.mdx +++ b/docs/multiple-widgets.mdx @@ -4,7 +4,9 @@ title: React Turnstile - Multiple widgets # Multiple widgets -You can have multiple widgets on the same page. You only need to make sure that each widget has a unique `id`. +You can have multiple widgets on the same page, you just need to use different `` components. + +For semantic purposes, it's recommended to use a unique `id` for each widget. Otherwise, you will have more then one container with the same `id` in the DOM. ```jsx @@ -28,14 +30,6 @@ You can have multiple widgets on the same page. You only need to make sure that <> - - - - ) } @@ -132,24 +126,3 @@ You even can add multiple widgets while manually injecting the Cloudflare script This is not the only way to do it. You can also manually inject the script by using a native `