Skip to content

Commit

Permalink
feat: add retry and retryInterval render options
Browse files Browse the repository at this point in the history
  • Loading branch information
@marsidev
marsidev committed Nov 21, 2022
1 parent 3c434ad commit 14549e6
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 17 deletions.
20 changes: 11 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,15 +70,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 `-`. |
| 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. |
| **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. |
| retry | `string` | `'auto'` | Controls whether the widget should automatically retry to obtain a token if it did not succeed. The default is `'auto'`, which will retry automatically. This can be set to `'never'` to disable retry upon failure. |
| retryInterval | `number` | `8000` | When `retry` is set to `'auto'`, `retryInterval` controls the time between retry attempts in milliseconds. The value must be a positive integer less than `900000`. When `retry` is set to `'never'`, this parameter has no effect. |

> All this options are optional.
Expand Down
9 changes: 4 additions & 5 deletions src/lib.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,9 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
'error-callback': onError,
size: config.size ?? 'normal',
'response-field': config.responseField,
'response-field-name': config.responseFieldName
'response-field-name': config.responseFieldName,
retry: config.retry ?? 'auto',
'retry-interval': config.retryInterval ?? 8000
}

const onLoadScript = () => {
Expand Down Expand Up @@ -132,10 +134,7 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
if (autoResetOnExpire) {
// expire time it's documented as 300 seconds but can happen in around 290 seconds.
const timerId = setInterval(() => window.turnstile?.reset(), 290 * 1000)

return () => {
clearInterval(timerId)
}
return () => clearInterval(timerId)
}
}, [configJson, scriptOptionsJson])

Expand Down
21 changes: 18 additions & 3 deletions src/types.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ interface TurnstileInstance {
}

/** Common options for the `.render()` function and the `options` prop in the `<Turnstile />` component */
interface TurnstileBaseOptions {
interface CommonRenderOptions {
/**
* 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 -.
* @default undefined
Expand All @@ -81,10 +81,15 @@ interface TurnstileBaseOptions {
* @default `normal`
*/
size?: 'normal' | 'compact'
/**
* Controls whether the widget should automatically retry to obtain a token if it did not succeed. The default is `'auto'`, which will retry automatically. This can be set to `'never'` to disable retry upon failure.
* @default `auto`
*/
retry?: 'auto' | 'never'
}

/** Props needed for the `options` prop in the `<Turnstile />` component */
interface ComponentRenderOptions extends TurnstileBaseOptions {
interface ComponentRenderOptions extends CommonRenderOptions {
/**
* The tabindex of Turnstile’s iframe for accessibility purposes.
* @default 0
Expand All @@ -100,10 +105,15 @@ interface ComponentRenderOptions extends TurnstileBaseOptions {
* @default `cf-turnstile-response`
*/
responseFieldName?: string
/**
* When `retry` is set to `'auto'`, `retryInterval` controls the time between retry attempts in milliseconds. The value must be a positive integer less than `900000`. When `retry` is set to `'never'`, this parameter has no effect.
* @default 8000
*/
retryInterval?: number
}

/** Props needed for the `.render()` function */
interface RenderParameters extends TurnstileBaseOptions {
interface RenderParameters extends CommonRenderOptions {
/**
* Every widget has a sitekey. This sitekey is associated with the corresponding widget configuration and is created upon the widget creation.
*/
Expand Down Expand Up @@ -136,6 +146,11 @@ interface RenderParameters extends TurnstileBaseOptions {
* @default `cf-turnstile-response`
*/
'response-field-name'?: string
/**
* When `retry` is set to `'auto'`, `retry-interval` controls the time between retry attempts in milliseconds. The value must be a positive integer less than `900000`. When `retry` is set to `'never'`, this parameter has no effect.
* @default 8000
*/
'retry-interval'?: number
}

interface ScriptOptions {
Expand Down

0 comments on commit 14549e6

Please sign in to comment.