diff --git a/README.md b/README.md index 5e31f69..3ce1d08 100644 --- 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 index 590e381..282fa87 100644 --- 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((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() const [scriptLoaded, setScriptLoaded] = useState(false) const containerRef = useRef(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((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 index 596d88a..433eceb 100644 --- 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 */