Captcha — usage examples

Captcha ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

React

import { useState } from 'react';
import { Captcha } from '@rozie-ui/captcha-react';

export function Demo() {
  const [token, setToken] = useState('');
  return (
    <Captcha
      provider="recaptcha"
      sitekey="your-site-key"
      token={token}
      onTokenChange={setToken}
      onVerify={(e) => console.log('verified', e.token)}
    />
  );
}

Vue

<script setup lang="ts">
import { ref } from 'vue';
import Captcha from '@rozie-ui/captcha-vue';

const token = ref('');
</script>

<template>
  <Captcha
    provider="recaptcha"
    sitekey="your-site-key"
    v-model:token="token"
    @verify="(e) => console.log('verified', e.token)"
  />
</template>

Svelte

<script lang="ts">
  import Captcha from '@rozie-ui/captcha-svelte';
  let token = $state('');
</script>

<Captcha
  provider="turnstile"
  sitekey="your-site-key"
  bind:token
  onverify={(e) => console.log('verified', e.token)}
/>

Angular

import { Component } from '@angular/core';
import { Captcha } from '@rozie-ui/captcha-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Captcha],
  template: `<Captcha provider="recaptcha" sitekey="your-site-key" [(token)]="token" (verify)="onVerify($event)" />`,
})
export class DemoComponent {
  token = '';
  onVerify(e: { token: string }) { console.log('verified', e.token); }
}

Solid

import { createSignal } from 'solid-js';
import { Captcha } from '@rozie-ui/captcha-solid';

export function Demo() {
  const [token, setToken] = createSignal('');
  return (
    <Captcha
      provider="recaptcha"
      sitekey="your-site-key"
      token={token()}
      onTokenChange={setToken}
      onVerify={(e) => console.log('verified', e.token)}
    />
  );
}

Lit

import '@rozie-ui/captcha-lit';

// <rozie-captcha> is a custom element.
const el = document.querySelector('rozie-captcha');
el.provider = 'turnstile';
el.sitekey = 'your-site-key';
el.addEventListener('verify', (e) => console.log('verified', e.detail.token));

Imperative handle

Beyond props and events, Captcha exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

React

import { useRef } from 'react';
import { Captcha, type CaptchaHandle } from '@rozie-ui/captcha-react';

const handle = useRef<CaptchaHandle>(null);
// <Captcha ref={handle} provider="recaptcha" sitekey="your-site-key" />
// handle.current?.reset();        // clear + reset the widget
// handle.current?.execute();      // invisible / programmatic challenge
// handle.current?.getResponse();  // read the current token

Vue

<script setup>
import { ref } from 'vue';
const handle = ref();
</script>

<template>
  <Captcha ref="handle" />
</template>

Svelte

<script>
  let handle;
</script>

<Captcha bind:this={handle} />

Angular

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(Captcha) handle!: Captcha;
}

Solid

import { Captcha, type CaptchaHandle } from '@rozie-ui/captcha-solid';

let handle: CaptchaHandle | undefined;
// <Captcha ref={(h) => (handle = h)} />

Lit

// The custom element IS the handle — its exposed methods are public element methods.
document.querySelector('rozie-captcha');

See also

• Captcha — showcase & API — the full prop / event / slot / handle reference, theming, and accessibility.
• Captcha comparison — how it stacks up against the per-framework libraries.
• Captcha — live demo — the real package running in the page, plus the one .rozie source and all six generated outputs.