Widgets Mode: Invisible

[omararturo]

Mode invisible feature

Current behavior The component continues to show the widget container even if it is in invisible mode

Expected behavior Component should not show UI when mode is invisible

[marsidev]

Did you set options={{ size: "invisible" }}?

[omararturo]

The component gets the mode configuration from Cloudflare and detects it but does not apply it to the container

[marsidev]

You need both a valid invisible siteKey and this property in your Turnstile component

options={{ size: "invisible" }}

[marsidev]

reference: https://github.com/marsidev/react-turnstile/pull/9

[omararturo]

If the configuration is changed from the Cloudflare server, the plugin detects that it is invisible, but the container does not take that behavior into account.

The component does not take into account the stealth mode configured from the server. Is it possible to add this functionality?

[marsidev]

The library is not smart enough to auto-detect invisible site keys. Even by using the vanilla Turnstile widget, there will be a container around the widget.

Again, you need to explicitly pass size: 'invisible' to the component. So, on our end, we set width and height to 0. Example

[harrygr]

Picking this up as this issue affected me.

Say I want to change the widget type without having to do a redeploy of my app with the corresponding size change; it would be nice if there was a size setting that did not add any width/height to the Turnstile element.

Perhaps adding a size: 'auto' option would be useful. It may come at the cost of some layout shift in some cases, but would allow easy switching of widget mode without having to change this options.

[marsidev]

Hey @harrygr,

not sure if we can know what size (compact/normal/invisible) the widget is. If you have an idea, feel free to create a PR in a new issue.

[harrygr]

Hey @marsidev. What I was suggesting was a size option that didn't apply any width or height to the widget, just letting it be its own size. Having experimented with a barebones integration it seems like the only reason to set the width/height is to prevent layout shift when there's a delay in the widget loading.

I'll have a go at a PR

[harrygr]

PR at #71