diff --git a/README.md b/README.md index 8257687..eb3f3a1 100644 --- a/README.md +++ b/README.md @@ -69,12 +69,17 @@ function Widget() { ### Render options -| **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 `-`. | +| **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 `-`. | +| responseField | `boolean` | `true` | A boolean that controls if an input element with the response token is created. | +| responseFieldName | `string` | `'cf-turnstile-response'` | Name of the input element. | +| size | `string` | `'normal'` | The widget size. Can take the following values: `'normal'`, `'compact'`. The normal size is 300x65px, the compact size is 130x120px. | + +> All this options are optional. > Read [the docs](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#configurations) to get more info about this options. @@ -113,7 +118,8 @@ function Widget() { className='fixed bottom-4 right-4' options={{ action: 'submit-form', - theme: 'light' + theme: 'light', + size: 'compact' }} scriptOptions={{ appendTo: 'body' @@ -280,7 +286,7 @@ export default async function handler(request, response) { > As you might noted, there is three ways to get the token response from a solved challenge: > - by catching it from the `onSuccess` callback. > - by calling the `.getResponse()` method. -> - by reading the widget response input with name `cf-turnstile-response`. +> - by reading the widget response input with name `cf-turnstile-response`. This one is not an option if you set `options.fieldResponse` to `false`. ## Contributing diff --git a/src/lib.tsx b/src/lib.tsx index 37dcc61..af11033 100644 --- a/src/lib.tsx +++ b/src/lib.tsx @@ -81,7 +81,10 @@ export const Turnstile = forwardRef { @@ -108,7 +111,6 @@ export const Turnstile = forwardRef` component */ @@ -85,6 +90,16 @@ interface ComponentOptions extends TurnstileBaseOptions { * @default 0 */ tabIndex?: number + /** + * A boolean that controls if an input element with the response token is created. + * @default true + */ + responseField?: boolean + /** + * Name of the input element. + * @default `cf-turnstile-response` + */ + responseFieldName?: string } /** Props needed for the `.render()` function */ @@ -111,6 +126,16 @@ interface RenderParameters extends TurnstileBaseOptions { * JavaScript callback that is invoked when there is a network error. */ 'error-callback'?: () => void + /** + * A boolean that controls if an input element with the response token is created. + * @default true + */ + 'response-field'?: boolean + /** + * Name of the input element. + * @default `cf-turnstile-response` + */ + 'response-field-name'?: string } interface ScriptOptions { diff --git a/test/e2e.test.ts b/test/e2e.test.ts index d467095..5ee0912 100644 --- a/test/e2e.test.ts +++ b/test/e2e.test.ts @@ -105,3 +105,21 @@ test('can get the token', async () => { await page.locator('button', { hasText: 'Get response' }).click() }) + +test('widget can be sized', async () => { + // check default width + const iframe = page.frameLocator('iframe[src^="https://challenges.cloudflare.com"]') + const box = await iframe.locator('body').boundingBox() + expect(box).toBeDefined() + expect(box!.width).toBe(300) + + // change size + await page.getByLabel('Size').selectOption('compact') + await ensureFrameVisible() + + // check new width + const iframeAfter = page.frameLocator('iframe[src^="https://challenges.cloudflare.com"]') + const boxAfter = await iframeAfter.locator('body').boundingBox() + expect(boxAfter).toBeDefined() + expect(boxAfter!.width).toBe(130) +})