fix: remove container option, use native id prop to modify default id

marsidev · Oct 17, 2022 · 94ea0b2 · 94ea0b2
1 parent 414e352
commit 94ea0b2
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@
 https://react-turnstile.vercel.app/
 
 ## Install
-1. First, [follow these steps](https://developers.cloudflare.com/turnstile/get-started/) to obtain a free site key and secret key from Cloudflare.
+1. [Follow these steps](https://developers.cloudflare.com/turnstile/get-started/) to obtain a free site key and secret key from Cloudflare.
 2. Install `@marsidev/react-turnstile` into your React application.
 
 	```bash
@@ -54,13 +54,12 @@ function Widget() {
 
 
 ### Render options
-| **Option** | **Type**                  | **Default**      | **Description**                                                                                                                                                                                                            |
-| ---------- | ------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| container  | `string` or `HTMLElement` | `'cf-turnstile'` | Container ID or container node that will wrap the widget iframe.                                                                                                                                                           |
-| theme      | `string`                  | `'auto'`         | The widget theme. You can choose between `light`, `dark` or `auto`.                                                                                                                                                        |
-| tabIndex   | `number`                  | `0`              | The `tabindex` of Turnstile’s iframe for accessibility purposes.                                                                                                                                                           |
-| action     | `string`                  | `undefined`      | A customer value that can be used to differentiate widgets under the same `sitekey` in analytics and which is returned upon validation. This can only contain up to 32 alphanumeric characters including `_` and `-`.      |
-| cData      | `string`                  | `undefined`      | A customer payload that can be used to attach customer data to the challenge throughout its issuance and which is returned upon validation. This can only contain up to 255 alphanumeric characters including `_` and `-`. |
+| **Option** | **Type** | **Default** | **Description**                                                                                                                                                                                                            |
+| ---------- | -------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| theme      | `string` | `'auto'`    | The widget theme. You can choose between `light`, `dark` or `auto`.                                                                                                                                                        |
+| tabIndex   | `number` | `0`         | The `tabindex` of Turnstile’s iframe for accessibility purposes.                                                                                                                                                           |
+| action     | `string` | `undefined` | A customer value that can be used to differentiate widgets under the same `sitekey` in analytics and which is returned upon validation. This can only contain up to 32 alphanumeric characters including `_` and `-`.      |
+| cData      | `string` | `undefined` | A customer payload that can be used to attach customer data to the challenge throughout its issuance and which is returned upon validation. This can only contain up to 255 alphanumeric characters including `_` and `-`. |
 
 > Read [the docs](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#configurations) to get more info about this options.
 
@@ -275,9 +274,9 @@ Any contributions are greatly appreciated. If you have a suggestion that would m
 
 ## 💻 Development
 
-- [Fork](https://github.com/marsidev/react-turnstile/fork) or clone the repo
-- Install dependencies with `pnpm install`
-- You can use `pnpm dev` to stub the library, `pnpm build` to build the library, `pnpm example:dev` to start the demo page in dev mode.
+- [Fork](https://github.com/marsidev/react-turnstile/fork) or clone this [repository](https://github.com/marsidev/react-turnstile).
+- Install dependencies with `pnpm install`.
+- You can use `pnpm dev` to stub the library, `pnpm build` to build the library or `pnpm example:dev` to start the demo page in development mode.
 
 ## Credits
 

diff --git a/src/lib.tsx b/src/lib.tsx
@@ -3,15 +3,15 @@ import { DEFAULT_CONTAINER_ID, DEFAULT_ONLOAD_NAME, injectTurnstileScript } from
 import { RenderParameters, TurnstileInstance, TurnstileProps } from './types'
 
 export const Turnstile = forwardRef<TurnstileInstance, TurnstileProps>((props, ref) => {
-	const { scriptOptions, options, siteKey, onSuccess, onExpire, onError, ...divProps } = props
-	const { container, ...config } = options ?? {}
+	const { scriptOptions, options, siteKey, onSuccess, onExpire, onError, id, ...divProps } = props
+	const config = options ?? {}
 
 	const [widgetId, setWidgetId] = useState<string | undefined | null>()
 	const [scriptLoaded, setScriptLoaded] = useState(false)
 	const containerRef = useRef<HTMLDivElement | null>(null)
 	const firstRendered = useRef(false)
 
-	const containerId = typeof container === 'string' ? container : DEFAULT_CONTAINER_ID
+	const containerId = id ?? DEFAULT_CONTAINER_ID
 	const onLoadCallbackName = scriptOptions?.onLoadCallbackName || DEFAULT_ONLOAD_NAME
 	const scriptOptionsJson = JSON.stringify(scriptOptions)
 	const configJson = JSON.stringify(config)
@@ -121,7 +121,7 @@ export const Turnstile = forwardRef<TurnstileInstance, TurnstileProps>((props, r
 		return () => {
 			clearInterval(timerId)
 		}
-	}, [configJson, scriptOptionsJson, container])
+	}, [configJson, scriptOptionsJson])
 
 	useEffect(
 		function rerenderWidget() {

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -85,12 +85,6 @@ interface ComponentOptions extends TurnstileBaseOptions {
 	 * @default 0
 	 */
 	tabIndex?: number
-	/**
-	 * Container ID or container node that will wrap the widget iframe.
-	 * @default `cf-turnstile`
-	 *
-	 */
-	container?: string | HTMLElement
 }
 
 /** Props needed for the `.render()` function */