Skip to content

Commit d738c79

Browse files
authored
Merge pull request #44 from marsidev/feature/v0.4
v0.4 changes
2 parents 8f4888e + 7daca97 commit d738c79

File tree

5 files changed

+50
-5
lines changed

5 files changed

+50
-5
lines changed

demos/nextjs/src/constants.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,11 @@ export const langOptions = [
1616
{ label: 'Português', value: 'pt' },
1717
{ label: 'Português (Brasil)', value: 'pt-BR' },
1818
{ label: 'Русский', value: 'ru' },
19+
{ label: 'tlhIngan Hol', value: 'tlh' },
1920
{ label: 'Türkçe', value: 'tr' },
21+
{ label: 'українська', value: 'uk' },
22+
{ label: 'українська (Україна)', value: 'uk-UA' },
23+
{ label: '中文', value: 'zh' },
2024
{ label: '中文(简体)', value: 'zh-CN' },
2125
{ label: '繁體中文', value: 'zh-TW' }
2226
] as const

docs/props.mdx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,13 @@ These are the props you can pass to the `Turnstile` component.
1313
| `scriptOptions` | object | You can customize the injected `script` tag with this prop. It allows you to add `'async'`, `'defer'`, `'nonce'` attributes to the script tag. You can also control whether the injected script will be added to the document body or head with `appendTo` attribute. More info about this options [below](/props#scriptoptions-prop). | |
1414
| `onSuccess` | function | Callback invoked upon success of the challenge. The callback is passed a token that can be validated. | |
1515
| `onExpire` | function | Callback invoked when a challenge expires. Read the [Cloudflare docs](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#refreshing-a-widget) for more info about handling expired widgets. | |
16-
| `onError` | function | Callback invoked when there is an error (e.g. network error or the challenge failed). | |
16+
| `onError` | function | Callback invoked when there is an error (e.g. network error or the challenge failed). Refer to [Client-side errors](https://developers.cloudflare.com/turnstile/reference/client-side-errors). | |
1717
| `onBeforeInteractive` | function | Callback invoked before the challenge enters interactive mode. | |
1818
| `onAfterInteractive` | function | Callback invoked when challenge has left interactive mode. | |
1919
| `onUnsupported` | function | Callback invoked when a given client/browser is not supported by Turnstile. | |
2020
| `as` | string | Define the HTML tag of the widget container. Default to `'div'`. | |
21-
| `injectScript` | boolean | Controls if the script is automatically injected or not. If you want to inject the script manually, set this property to `false`. Default to `true`. | |
21+
| `injectScript` | boolean | Controls if the script is automatically injected or not. If you want to inject the script manually, set this property to `false`. Default to `true`. | |
22+
| `onLoadScript` | function | Callback invoked when the script is injected and loaded. | |
2223

2324
<Info>
2425
You can pass any valid HTML prop such as `className`, `id`, or `style`, based on the `as` prop.
@@ -31,7 +32,7 @@ These are the props you can pass to the `Turnstile` component.
3132
| `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 `-`. |
3233
| `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 `-`. |
3334
| `theme` | string | `'auto'` | The widget theme. You can choose between `'light'`, `'dark'` or `'auto'`. |
34-
| `language` | string | `'auto'` | Language to display, must be either: `auto` (default) to use the language that the visitor has chosen, or an ISO 639-1 two-letter language code (e.g. `en`) or language and country code (e.g. `pt-BR`). The following languages are currently supported: `ar-EG`, `de`, `en`, `es`, `fa`, `fr`, `id`, `it`, `ja`, `ko`, `nl`, `pl`, `pt-BR`, `ru`, `tr`, `zh-CN` and `zh-TW`. |
35+
| `language` | string | `'auto'` | Language to display, must be either: `auto` (default) to use the language that the visitor has chosen, or an ISO 639-1 two-letter language code (e.g. `en`) or language and country code (e.g. `en-US`). Refer to the [list of supported languages](https://developers.cloudflare.com/turnstile/reference/supported-languages/) for more information. |
3536
| `tabIndex` | number | `0` | The `tabindex` of Turnstile’s iframe for accessibility purposes. |
3637
| `responseField` | boolean | `true` | A boolean that controls if an input element with the response token is created. |
3738
| `responseFieldName` | string | `'cf-turnstile-response'` | Name of the input element. |

docs/use-ref-methods.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ The library exposes some methods within the `Turnstile` ref, in order to interac
1313
| `remove()` | Removes the widget. Useful when a widget is no longer needed. This will not call any callback and will remove all related DOM elements. | void |
1414
| `render()` | Renders the widget. Since all widgets are rendered automatically, this only takes effect if the widget was previously removed. If the widget is already rendered, this method will not re-render the widget. | void |
1515
| `execute()` | If `options.execution` is set to `'execute'`, this method is used to render the widget. If the widget is already shown (rendered and executed), this method will not re-render the widget. If the widget got removed (`.remove()`), you need to call `.render()` and then `.execute()`. If `options.execution` is set to `'render'` (default), this method takes no effect. | void |
16+
| `isExpired()` | Returns `true` if the widget has expired. | boolean |
1617

1718
<CodeGroup>
1819
```jsx

packages/lib/src/lib.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
2323
onBeforeInteractive,
2424
onAfterInteractive,
2525
onUnsupported,
26+
onLoadScript,
2627
id,
2728
style,
2829
as = 'div',
@@ -164,6 +165,15 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
164165

165166
turnstile.execute(containerRef.current, renderConfig)
166167
setContainerStyle(CONTAINER_STYLE_SET[widgetSize])
168+
},
169+
170+
isExpired() {
171+
if (!turnstile?.isExpired || !widgetId) {
172+
console.warn('Turnstile has not been loaded')
173+
return
174+
}
175+
176+
return turnstile.isExpired(widgetId)
167177
}
168178
}
169179
},
@@ -249,6 +259,13 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
249259
)
250260
}, [options.execution, widgetSize, renderConfig.appearance])
251261

262+
// onLoadScript callback
263+
useEffect(() => {
264+
if (!scriptLoaded || typeof onLoadScript !== 'function') return
265+
266+
onLoadScript()
267+
}, [scriptLoaded, onLoadScript])
268+
252269
return (
253270
<Container
254271
ref={containerRef}

packages/lib/src/types.ts

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,13 @@ interface _Turnstile {
3939
* @returns The token response.
4040
*/
4141
getResponse: (id?: string) => string | undefined
42+
43+
/**
44+
* Check if a widget is expired.
45+
* @param id - Optional. ID of the widget to check, if not provided will target the last rendered widget.
46+
* @returns `true` if the widget is expired, `false` otherwise.
47+
*/
48+
isExpired: (id?: string) => boolean
4249
}
4350

4451
/* Same as _Turnstile but without custom widget IDs. */
@@ -69,6 +76,12 @@ interface TurnstileInstance {
6976
* @returns The token response.
7077
*/
7178
getResponse: () => string | undefined
79+
80+
/**
81+
* Check if the current rendered widget is expired.
82+
* @returns `true` if the widget is expired, `false` otherwise.
83+
*/
84+
isExpired: () => boolean | undefined
7285
}
7386

7487
interface RenderOptions {
@@ -96,7 +109,7 @@ interface RenderOptions {
96109
callback?: (token: string) => void
97110

98111
/**
99-
* Callback invoked when there is an error (e.g. network error or the challenge failed).
112+
* Callback invoked when there is an error (e.g. network error or the challenge failed). Refer to [Client-side errors](https://developers.cloudflare.com/turnstile/reference/client-side-errors).
100113
*/
101114
'error-callback'?: () => void
102115

@@ -133,7 +146,7 @@ interface RenderOptions {
133146
theme?: TurnstileTheme
134147

135148
/**
136-
* Language to display, must be either: `auto` (default) to use the language that the visitor has chosen, or an ISO 639-1 two-letter language code (e.g. `en`).
149+
* Language to display, must be either: `auto` (default) to use the language that the visitor has chosen, or an ISO 639-1 two-letter language code (e.g. `en`) or language and country code (e.g. `en-US`). Refer to the [list of supported languages](https://developers.cloudflare.com/turnstile/reference/supported-languages/) for more information.
137150
* @default `auto`
138151
*/
139152
language?: 'auto' | TurnstileLangCode | (string & Record<never, never>)
@@ -336,6 +349,11 @@ interface TurnstileProps extends React.HTMLAttributes<HTMLDivElement> {
336349
* Controls if the script is automatically injected or not. If you want to inject the script manually, set this property to `false`. Default to `true`.
337350
*/
338351
injectScript?: boolean
352+
353+
/**
354+
* Callback invoked when the script is injected and loaded.
355+
*/
356+
onLoadScript?: () => void
339357
}
340358

341359
interface InjectTurnstileScriptParams {
@@ -365,7 +383,11 @@ type TurnstileLangCode =
365383
| 'pt'
366384
| 'pt-BR'
367385
| 'ru'
386+
| 'tlh'
368387
| 'tr'
388+
| 'uk'
389+
| 'uk-ua'
390+
| 'zh'
369391
| 'zh-CN'
370392
| 'zh-TW'
371393

0 commit comments

Comments
 (0)