Managing widget status

You can use the callbacks onError, onExpire and onSuccess to manage the widget status.

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

export default function Widget() {
  const [status, setStatus] = React.useState()

  return (
    <Turnstile
      siteKey='1x00000000000000000000AA'
      onError={() => setStatus('error')}
      onExpire={() => setStatus('expired')}
      onSuccess={() => setStatus('solved')}
    />
  )
}

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

type Status = 'error' | 'expired' | 'solved'

export default function Widget() {
  const [status, setStatus] = React.useState<Status | null>(null)

  return (
    <Turnstile
      siteKey='1x00000000000000000000AA'
      onError={() => setStatus('error')}
      onExpire={() => setStatus('expired')}
      onSuccess={() => setStatus('solved')}
    />
  )
}

Examples

Managing widget status