Skip to content

Commit

Permalink
feat: add size, responseField and responseFieldNames render options
Browse files Browse the repository at this point in the history
  • Loading branch information
marsidev committed Nov 2, 2022
1 parent 85df303 commit d1d74f1
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 10 deletions.
22 changes: 14 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -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
Expand Down
6 changes: 4 additions & 2 deletions src/lib.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,10 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
tabindex: config.tabIndex,
callback: onSuccess,
'expired-callback': onExpire,
'error-callback': onError
'error-callback': onError,
size: config.size ?? 'normal',
'response-field': config.responseField,
'response-field-name': config.responseFieldName
}

const onLoadScript = () => {
Expand All @@ -108,7 +111,6 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
}
}

// inject turnstile script
injectTurnstileScript({
render: 'explicit',
onLoadCallbackName,
Expand Down
25 changes: 25 additions & 0 deletions src/types.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,11 @@ interface TurnstileBaseOptions {
* @default `auto`
*/
theme?: 'light' | 'dark' | 'auto'
/**
* The widget size. Can take the following values: `normal`, `compact`. The normal size is 300x65px, the compact size is 130x120px.
* @default `normal`
*/
size?: 'normal' | 'compact'
}

/** Props needed for the `options` prop in the `<Turnstile />` component */
Expand All @@ -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 */
Expand All @@ -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 {
Expand Down
18 changes: 18 additions & 0 deletions test/e2e.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
})

0 comments on commit d1d74f1

Please sign in to comment.