react.md

React

@cluion/turing-react wraps the <turing-captcha> Web Component as a React component with callback props. Portable across React 18 and 19.

Install

pnpm add @cluion/turing-react

react is a peer dependency (^18 || ^19); it is never bundled.

Use

import { Turing } from '@cluion/turing-react';

export function SignupForm() {
  return (
    <form method="post" action="/submit">
      <Turing
        url="/turing/challenge"
        type="pow"
        onSolved={() => {/* enable submit, etc. */}}
        onError={(error) => console.error(error)}
      />
      <button type="submit">Send</button>
    </form>
  );
}

Props

Prop	Required	Description
url	yes	Challenge endpoint URL.
type	no	Challenge type, e.g. pow.
field	no	Hidden input name (default turing_token).
onSolved	no	Called once the token is injected.
onError	no	Called with the error on failure.

The component renders in light DOM so the injected hidden input stays inside your <form> and submits normally. Events are wired via a ref effect (with cleanup), so callbacks stay current across re-renders.