Is it possible to tell if the captcha is visible?

[sketchbuch]

I want to add a spacing between it and some buttons, but only when it is visible

[marsidev]

You can use the onBeforeInteractive callback, which runs before the challenge becomes interactive.

Example:

import { Turnstile } from '@marsidev/react-turnstile'
import React from 'react'

export default function Page() {
  const [isVisible, setIsVisible] = React.useState(false)

  return (
    <React.Fragment>
      <Turnstile
        siteKey="3x00000000000000000000FF"
        onBeforeInteractive={() => setIsVisible(true)}
      />

      {isVisible && <button>Conditional Button</button>}
    </React.Fragment>
  )
}

[sketchbuch]

yeah, but I want to know if it is visible. After onAfterInteractive fires it can still be visible. Because of this, when onBeforeInteractive fires it xcan already be visible.

[marsidev]

We don't have a onVisible callback, but we you can use the ResizeObserver API to achive what you need. Check this demo.