Interact with the widget

You can interact with the widget using the ref prop. The available methods are listed here.

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

export default function Widget() {
  const ref = React.useRef()

  return (
    <>
      <Turnstile ref={ref} siteKey='1x00000000000000000000AA' />

      <button onClick={() => alert(ref.current?.getResponse())}>
        Get response
      </button>

      <button onClick={() => ref.current?.reset()}>
        Reset widget
      </button>

      <button onClick={() => ref.current?.remove()}>
        Remove widget
      </button>

      <button onClick={() => ref.current?.render()}>
        Render widget
      </button>
    </>
  )
}

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

export default function Widget() {
  const ref = React.useRef<TurnstileInstance | null>(null)

  return (
    <>
      <Turnstile ref={ref} siteKey='1x00000000000000000000AA' />

      <button onClick={() => alert(ref.current?.getResponse())}>
        Get response
      </button>

      <button onClick={() => ref.current?.reset()}>
        Reset widget
      </button>

      <button onClick={() => ref.current?.remove()}>
        Remove widget
      </button>

      <button onClick={() => ref.current?.render()}>
        Render widget
      </button>
    </>
  )
}

Examples

Interact with the widget