search

marsidev / react-turnstile

Cloudflare Turnstile integration for React.
https://www.npmjs.com/package/@marsidev/react-turnstile
MIT License
414 stars 25 forks source link

appearance on interaction-only has width and height #27

Closed tnfAngel closed 1 year ago

tnfAngel commented 1 year ago

Bug report

What is the current behavior?

The component has width and height other than 0 when the appearance is on interaction-only imagen imagen

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox example below: Set the appearance to interaction-only

What is the expected behavior? The component must have width and height of 0, and if an interaction is required, set the correct width and the correct height (this is the default behavior of the cloudflare official script)

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? Firefox, Windows. Deps: "next": "13.4.12", "react": "18.2.0"

flacial commented 1 year ago

For anyone having this problem, try to give each widget a unique ID.

<>
  <Turnstile siteKey={...} id="widget-1" />
  <Turnstile siteKey={...} id="widget-2" />
</>