Skip to content

Commit

Permalink
feat: add onBeforeInteractive, onAfterInteractive and `onUnsuppor…
Browse files Browse the repository at this point in the history 
…ted` callbacks
  • Loading branch information
@marsidev
marsidev committed Apr 26, 2023
1 parent 9857427 commit 95c4b9e
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 10 deletions.
9 changes: 6 additions & 3 deletions docs/props.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,12 @@ These are the props you can pass to the `Turnstile` component.
| `siteKey` | string | Your sitekey key, get one from [here](https://developers.cloudflare.com/turnstile/get-started/). | ✅ |
| ``options`` | object | Widget render options. More info about this options [below](/props#options-prop). | |
| `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). | |
| `onSuccess` | function | Callback that is invoked upon success of the challenge. The callback is passed a token that can be validated. | |
| `onExpire` | function | Callback that is 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. | |
| onError | function | Callback that is invoked when there is a network error. | |
| `onSuccess` | function | Callback invoked upon success of the challenge. The callback is passed a token that can be validated. | |
| `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. | |
| `onError` | function | Callback invoked when there is an error (e.g. network error or the challenge failed). | |
| `onBeforeInteractive` | function | Callback invoked before the challenge enters interactive mode. | |
| `onAfterInteractive` | function | Callback invoked when challenge has left interactive mode. | |
| `onUnsupported` | function | Callback invoked when a given client/browser is not supported by Turnstile. | |
| `as` | string | Define the HTML tag of the widget container. Default to `'div'`. | |
| `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`. | |

Expand Down
18 changes: 17 additions & 1 deletion packages/lib/src/lib.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
onSuccess,
onExpire,
onError,
onBeforeInteractive,
onAfterInteractive,
onUnsupported,
id,
style,
as = 'div',
Expand Down Expand Up @@ -51,6 +54,9 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
callback: onSuccess,
'error-callback': onError,
'expired-callback': onExpire,
'before-interactive-callback': onBeforeInteractive,
'after-interactive-callback': onAfterInteractive,
'unsupported-callback': onUnsupported,
theme: options.theme ?? 'auto',
language: options.language ?? 'auto',
tabindex: options.tabIndex,
Expand All @@ -63,7 +69,17 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
execution: options.execution ?? 'render',
appearance: options.appearance ?? 'always'
}),
[siteKey, options, onSuccess, onError, onExpire, widgetSize]
[
siteKey,
options,
onSuccess,
onError,
onExpire,
widgetSize,
onBeforeInteractive,
onAfterInteractive,
onUnsupported
]
)

const renderConfigStringified = useMemo(() => JSON.stringify(renderConfig), [renderConfig])
Expand Down
42 changes: 36 additions & 6 deletions packages/lib/src/types.d.ts → packages/lib/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,13 +90,13 @@ interface RenderOptions {
cData?: string

/**
* Callback that is invoked upon success of the challenge. The callback is passed a token that can be validated.
* Callback invoked upon success of the challenge. The callback is passed a token that can be validated.
* @param token - Token response.
*/
callback?: (token: string) => void

/**
* Callback that is invoked when there is a network error.
* Callback invoked when there is an error (e.g. network error or the challenge failed).
*/
'error-callback'?: () => void

Expand All @@ -106,10 +106,25 @@ interface RenderOptions {
execution?: 'render' | 'execute'

/**
* Callback that is invoked when a challenge expires and does not reset the widget.
* Callback invoked when a challenge expires and does not reset the widget.
*/
'expired-callback'?: () => void

/**
* Callback invoked before the challenge enters interactive mode.
*/
'before-interactive-callback'?: () => void

/**
* Callback invoked when challenge has left interactive mode.
*/
'after-interactive-callback'?: () => void

/**
* Callback invoked when a given client/browser is not supported by Turnstile.
*/
'unsupported-callback'?: () => void

/**
* The widget theme. This can be forced to light or dark by setting the theme accordingly.
*
Expand Down Expand Up @@ -261,21 +276,36 @@ interface TurnstileProps extends React.HTMLAttributes<HTMLDivElement> {
siteKey: RenderOptions['sitekey']

/**
* Callback that is invoked upon success of the challenge. The callback is passed a token that can be validated.
* Callback invoked upon success of the challenge. The callback is passed a token that can be validated.
* @param token - Token response.
*/
onSuccess?: RenderOptions['callback']

/**
* Callback that is invoked when a challenge expires and does not reset the widget.
* Callback invoked when a challenge expires and does not reset the widget.
*/
onExpire?: RenderOptions['expired-callback']

/**
* Callback that is invoked when there is a network error.
* Callback invoked when there is an error (e.g. network error or the challenge failed).
*/
onError?: RenderOptions['error-callback']

/**
* Callback invoked before the challenge enters interactive mode.
*/
onBeforeInteractive?: RenderOptions['before-interactive-callback']

/**
* Callback invoked when challenge has left interactive mode.
*/
onAfterInteractive?: RenderOptions['after-interactive-callback']

/**
* Callback invoked when a given client/browser is not supported by Turnstile.
*/
onUnsupported?: RenderOptions['unsupported-callback']

/**
* Custom widget render options. See {@link https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#configurations the docs} for more info about this options.
*/
Expand Down

0 comments on commit 95c4b9e

Please sign in to comment.