### Installation Dependencies

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/examples/better-auth/README.md

Commands to install dependencies using bun or npm.

```bash
bun install
# or
npm install
```

--------------------------------

### Install dependencies and start development server

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/testing/vue/README.md

Commands to install project dependencies using bun and start the development server.

```bash
bun install
bun run dev
```

--------------------------------

### Start development server

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/testing/svelte/README.md

Commands to start the Svelte development server, with an option to open the app in a new browser tab.

```sh
npm run dev
```

```sh
npm run dev -- --open
```

--------------------------------

### Installation with Bun

Source: https://github.com/luggapugga/better-captcha/blob/main/packages/qwik/README.md

Installs the @better-captcha/qwik package using Bun.

```sh
bun install @better-captcha/qwik
```

--------------------------------

### Create a new Svelte project

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/testing/svelte/README.md

Commands to create a new Svelte project, either in the current directory or a specified directory.

```sh
npx sv create
```

```sh
npx sv create my-app
```

--------------------------------

### Installation with Bun

Source: https://github.com/luggapugga/better-captcha/blob/main/packages/solidjs/README.md

Install the @better-captcha/solidjs package using Bun.

```sh
bun install @better-captcha/solidjs
```

--------------------------------

### Installation

Source: https://github.com/luggapugga/better-captcha/blob/main/packages/vue/README.md

Install the @better-captcha/vue package using bun.

```sh
bun install @better-captcha/vue
```

--------------------------------

### Start Development Server

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/testing/react/README.md

Command to start the development server using Bun.

```bash
bun dev
```

--------------------------------

### Installation with npm

Source: https://github.com/luggapugga/better-captcha/blob/main/packages/qwik/README.md

Installs the @better-captcha/qwik package using npm.

```sh
npm install @better-captcha/qwik
```

--------------------------------

### Build for production

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/testing/svelte/README.md

Command to create a production build of the Svelte application.

```sh
npm run build
```

--------------------------------

### Installation

Source: https://github.com/luggapugga/better-captcha/blob/main/packages/vue/README.md

Install the @better-captcha/vue package using npm.

```sh
npm install @better-captcha/vue
```

--------------------------------

### Installation with Bun

Source: https://github.com/luggapugga/better-captcha/blob/main/packages/svelte/README.md

Installs the @better-captcha/svelte package using Bun.

```sh
bun install @better-captcha/svelte
```

--------------------------------

### Install Dependencies

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/testing/react/README.md

Command to install project dependencies using Bun.

```bash
bun install
```

--------------------------------

### Installation with Bun

Source: https://github.com/luggapugga/better-captcha/blob/main/packages/lit/README.md

Install the @better-captcha/lit package using Bun.

```sh
bun install @better-captcha/lit
```

--------------------------------

### Installation

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/frameworks/qwik.mdx

Install the Qwik provider for better-captcha using npm.

```bash
npm i @better-captcha/qwik
```

--------------------------------

### Installation with npm

Source: https://github.com/luggapugga/better-captcha/blob/main/packages/solidjs/README.md

Install the @better-captcha/solidjs package using npm.

```sh
npm install @better-captcha/solidjs
```

--------------------------------

### Installation

Source: https://github.com/luggapugga/better-captcha/blob/main/packages/react/README.md

Install the @better-captcha/react package using bun or npm.

```sh
bun install @better-captcha/react
```

```sh
npm install @better-captcha/react
```

--------------------------------

### Basic ReCaptcha Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/index.mdx

Import and use the ReCaptcha provider in a React component.

```tsx
import { ReCaptcha } from "@better-captcha/react/provider/recaptcha";

export function ContactForm() {
  return <ReCaptcha sitekey="your-site-key" />;
}
```

--------------------------------

### Installation with Bun

Source: https://github.com/luggapugga/better-captcha/blob/main/packages/preact/README.md

Installs the @better-captcha/preact package using Bun.

```sh
bun install @better-captcha/preact
```

--------------------------------

### Installation with npm

Source: https://github.com/luggapugga/better-captcha/blob/main/packages/svelte/README.md

Installs the @better-captcha/svelte package using npm.

```sh
npm install @better-captcha/svelte
```

--------------------------------

### Installation

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/cn/frameworks/svelte.mdx

Install the Svelte package for better-captcha.

```bash
npm i @better-captcha/svelte
```

--------------------------------

### Accessing Widget Handle

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/index.mdx

Using useRef to access the ReCaptcha widget handle for form submission.

```tsx
import { useRef } from "react";
import { ReCaptcha, type ReCaptchaHandle } from "@better-captcha/react/provider/recaptcha";

export function ContactForm() {
  const captchaRef = useRef<ReCaptchaHandle>(null);

  const handleSubmit = async () => {
    const token = captchaRef.current?.getResponse();
    // Send token to your backend for verification
  };

  return (
    <form onSubmit={handleSubmit}>
      <ReCaptcha ref={captchaRef} sitekey="your-site-key" />
      <button type="submit">Submit</button>
    </form>
  );
}
```

--------------------------------

### Installation

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/frameworks/solidjs.mdx

Install the SolidJS provider for better-captcha using npm.

```bash
npm i @better-captcha/solidjs
```

--------------------------------

### Installation

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/frameworks/vue.mdx

Install the Vue package using npm.

```bash
npm i @better-captcha/vue
```

--------------------------------

### Installation

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/frameworks/lit.mdx

Install the Lit provider for better-captcha using npm.

```bash
npm i @better-captcha/lit
```

--------------------------------

### Installation with npm

Source: https://github.com/luggapugga/better-captcha/blob/main/packages/lit/README.md

Install the @better-captcha/lit package using npm.

```sh
npm install @better-captcha/lit
```

--------------------------------

### Installation

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/frameworks/preact.mdx

Install the Preact provider for better-captcha using npm.

```bash
npm i @better-captcha/preact
```

--------------------------------

### Develop a Solid project

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/testing/solidjs/README.md

Commands to start the development server for a Solid project.

```bash
npm run dev

npm run dev -- --open
```

--------------------------------

### Installation

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/frameworks/react.mdx

Install the React package for better-captcha using npm.

```bash
npm i @better-captcha/react
```

--------------------------------

### Installation with npm

Source: https://github.com/luggapugga/better-captcha/blob/main/packages/preact/README.md

Installs the @better-captcha/preact package using npm.

```sh
npm install @better-captcha/preact
```

--------------------------------

### Combined Configuration Example

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/cn/script-options.mdx

Example demonstrating a combination of script loading configurations.

```tsx
<ReCaptcha
  sitekey="your-site-key"
  scriptOptions={{
    autoLoad: false,
    timeout: 30000,
    overrideScriptUrl: "https://custom-cdn.com/recaptcha/api.js"
  }}
/>
```

--------------------------------

### Qwik Example

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/auto-theme.mdx

Example of using the auto theme option with the Qwik provider for reCAPTCHA.

```tsx
import { component$ } from "@builder.io/qwik";
import { ReCaptcha } from "@better-captcha/qwik/provider/recaptcha";

export default component$(() => (
  <ReCaptcha 
    sitekey="your-site-key"
    options={{ theme: "auto" }} // Automatically detects system theme
  />
));
```

--------------------------------

### Lit Example (Import)

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/auto-theme.mdx

Import statement for the Lit provider.

```ts
import { ReCaptcha } from "@better-captcha/lit/provider/recaptcha";
```

--------------------------------

### SolidJS Example

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/auto-theme.mdx

Example of using the auto theme option with the SolidJS provider for reCAPTCHA.

```tsx
import { ReCaptcha } from "@better-captcha/solidjs/provider/recaptcha";

<ReCaptcha 
  sitekey="your-site-key"
  options={{ theme: "auto" }} // Automatically detects system theme
/>
```

--------------------------------

### Manual Script Loading Example

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/script-options.mdx

Example showing how to manually load the ReCaptcha script and disable auto-loading.

```html
<!-- Add this to your HTML head -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
```

```tsx
<ReCaptcha
  sitekey="your-site-key"
  scriptOptions={{ autoLoad: false }}
/>
```

--------------------------------

### Lit Example (Usage)

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/auto-theme.mdx

Example of using the auto theme option with the Lit provider for reCAPTCHA.

```html
<recaptcha-captcha sitekey="your-site-key"></recaptcha-captcha>

<script>
  const captcha = document.querySelector('recaptcha-captcha');
  captcha.options = { theme: 'auto' }; // Automatically detects system theme
</script>
```

--------------------------------

### Development Server

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/examples/better-auth/README.md

Commands to run the development server using bun or npm.

```bash
bun dev
# or
npm run dev
```

--------------------------------

### Vue Example

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/auto-theme.mdx

Example of using the auto theme option with the Vue provider for reCAPTCHA.

```vue
<template>
  <ReCaptcha
    sitekey="your-site-key"
    :options="{ theme: 'auto' }" <!-- Automatically detects system theme -->
  />
</template>

<script setup lang="ts">
import { ReCaptcha } from "@better-captcha/vue/provider/recaptcha";
</script>
```

--------------------------------

### React Example

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/auto-theme.mdx

Example of using the auto theme option with the React provider for reCAPTCHA.

```tsx
import { ReCaptcha } from "@better-captcha/react/provider/recaptcha";

<ReCaptcha 
  sitekey="your-site-key"
  options={{ theme: "auto" }} // Automatically detects system theme
/>
```

--------------------------------

### Svelte Example

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/auto-theme.mdx

Example of using the auto theme option with the Svelte provider for reCAPTCHA.

```svelte
<script lang="ts">
import ReCaptcha from "@better-captcha/svelte/provider/recaptcha";
</script>

<ReCaptcha 
  sitekey="your-site-key"
  options={{ theme: "auto" }} <!-- Automatically detects system theme -->
/>
```

--------------------------------

### CSP nonce on the provider script Example

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/script-options.mdx

Example demonstrating how to use a CSP nonce with the ReCaptcha provider script.

```tsx
<ReCaptcha
  sitekey="your-site-key"
  scriptOptions={{
    nonce: cspNonceFromRequest,
    referrerPolicy: "strict-origin-when-cross-origin",
  }}
/>
```

--------------------------------

### Qwik Basic Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/README.md

Basic usage example for Qwik.

```tsx
import { component$ } from "@builder.io/qwik";
import { ReCaptcha } from "@better-captcha/qwik/provider/recaptcha";

export const ContactCaptcha = component$(() => {
	return <ReCaptcha sitekey="your-site-key" />;
});
```

--------------------------------

### Manual Script Loading Example (HTML)

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/cn/script-options.mdx

Example of manually loading the script by adding it to your HTML head and disabling auto-load.

```html
<!-- Add this to your HTML head -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
```

--------------------------------

### Extra attributes Example

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/script-options.mdx

Example showing how to add extra attributes to the ReCaptcha script tag.

```tsx
<ReCaptcha
  sitekey="your-site-key"
  scriptOptions={{
    scriptAttributes: { "data-app": "checkout" },
  }}
/>
```

--------------------------------

### Custom Script URL Example

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/cn/script-options.mdx

Example of loading the provider script from a custom URL.

```tsx
<ReCaptcha
  sitekey="your-site-key"
  scriptOptions={{
    overrideScriptUrl: "https://custom-cdn.com/recaptcha/api.js"
  }}
/>
```

--------------------------------

### Qwik Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/hcaptcha.mdx

Example of how to use HCaptcha in a Qwik application.

```tsx
import { component$ } from "@builder.io/qwik";
import { HCaptcha } from "@better-captcha/qwik/provider/hcaptcha";

export default component$(() => (
  <HCaptcha sitekey="10000000-ffff-ffff-ffff-000000000001" options={{}} />
));
```

--------------------------------

### Vue Basic Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/README.md

Basic usage example for Vue.

```vue
<template>
	<ReCaptcha sitekey="your-site-key" />
</template>

<script setup lang="ts">
	import { ReCaptcha } from "@better-captcha/vue/provider/recaptcha";
</script>
```

--------------------------------

### Qwik Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/prosopo.mdx

Example of how to use the Prosopo component in a Qwik application.

```tsx
import { component$ } from "@builder.io/qwik";
import { Prosopo } from "@better-captcha/qwik/provider/prosopo";

export default component$(() => (
  <Prosopo sitekey="no-testing-key" options={{}} />
));
```

--------------------------------

### Manual Script Loading Example (React)

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/cn/script-options.mdx

Example of using ReCaptcha component with auto-load disabled.

```tsx
<ReCaptcha
  sitekey="your-site-key"
  scriptOptions={{ autoLoad: false }}
/>
```

--------------------------------

### Svelte Basic Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/README.md

Basic usage example for Svelte.

```svelte
<script lang="ts">
	import ReCaptcha from "@better-captcha/svelte/provider/recaptcha";
</script>

<ReCaptcha sitekey="your-site-key" />
```

--------------------------------

### SolidJS Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/prosopo.mdx

Example of how to use the Prosopo component in a SolidJS application.

```tsx
import { Prosopo } from "@better-captcha/solidjs/provider/prosopo";

<Prosopo sitekey="no-testing-key" options={{}} />
```

--------------------------------

### Qwik Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/friendly-captcha.mdx

Example of how to use FriendlyCaptcha in a Qwik application.

```tsx
import { component$ } from "@builder.io/qwik";
import { FriendlyCaptcha } from "@better-captcha/qwik/provider/friendly-captcha";

export default component$(() => (
  <FriendlyCaptcha sitekey="FCMTL-000000000000000000000" options={{}} />
));
```

--------------------------------

### Lit Usage (JS Import)

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/prosopo.mdx

Example of importing the Prosopo component for Lit.

```ts
import { Prosopo } from "@better-captcha/lit/provider/prosopo";
```

--------------------------------

### Qwik Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/turnstile.mdx

Example of using the Turnstile provider in a Qwik application.

```tsx
import { component$ } from "@builder.io/qwik";
import { Turnstile } from "@better-captcha/qwik/provider/turnstile";

export default component$(() => (
  <Turnstile sitekey="1x00000000000000000000AA" options={{}} />
));
```

--------------------------------

### Qwik Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/private-captcha.mdx

Example of how to use PrivateCaptcha in a Qwik application.

```tsx
import { component$ } from "@builder.io/qwik";
import { PrivateCaptcha } from "@better-captcha/qwik/provider/private-captcha";

export default component$(() => (
	  <form>
      <PrivateCaptcha sitekey="aaaaaaaabbbbccccddddeeeeeeeeeeee" options={{}} />
    </form>
));
```

--------------------------------

### React Basic Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/README.md

Basic usage example for React.

```tsx
import { ReCaptcha } from "@better-captcha/react/provider/recaptcha";

export function ContactCaptcha() {
	return <ReCaptcha sitekey="your-site-key" />;
}
```

--------------------------------

### Vue Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/prosopo.mdx

Example of how to use the Prosopo component in a Vue application.

```vue
<template>
    <Prosopo
      sitekey="no-testing-key"
      :options="{ theme: 'dark' }"
    />
  </template>

  <script setup lang="ts">
  import { Prosopo } from "@better-captcha/vue/provider/prosopo";
  </script>
```

--------------------------------

### Create a new Solid project

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/testing/solidjs/README.md

Commands to create a new Solid project using npm.

```bash
npm init solid@latest

npm init solid@latest my-app
```

--------------------------------

### Sending Captcha Token to Better Auth

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/examples/better-auth/README.md

Example of sending the captcha token to Better Auth via the 'x-captcha-response' header during the sign-in process.

```typescript
await authClient.signIn.email(
  {
    email,
    password,
  },
  {
    onRequest: (ctx) => {
      ctx.headers.set("x-captcha-response", token);
    },
  },
);
```

--------------------------------

### SolidJS Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/hcaptcha.mdx

Example of how to use HCaptcha in a SolidJS application.

```tsx
import { HCaptcha } from "@better-captcha/solidjs/provider/hcaptcha";

<HCaptcha sitekey="10000000-ffff-ffff-ffff-000000000001" options={{}} />
```

--------------------------------

### Svelte Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/hcaptcha.mdx

Example of how to use HCaptcha in a Svelte application.

```svelte
<script lang="ts">
import HCaptcha from "@better-captcha/svelte/provider/hcaptcha";
</script>

<HCaptcha sitekey="10000000-ffff-ffff-ffff-000000000001" options={{}} />
```

--------------------------------

### SolidJS Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/friendly-captcha.mdx

Example of how to use FriendlyCaptcha in a SolidJS application.

```tsx
import { FriendlyCaptcha } from "@better-captcha/solidjs/provider/friendly-captcha";

<FriendlyCaptcha sitekey="" options={{}} />
```

--------------------------------

### Svelte Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/prosopo.mdx

Example of how to use the Prosopo component in a Svelte application.

```svelte
<script lang="ts">
import Prosopo from "@better-captcha/svelte/provider/prosopo";
</script>

<Prosopo sitekey="no-testing-key" options={{}} />
```

--------------------------------

### Increase Timeout Example

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/cn/script-options.mdx

Example of increasing the timeout for script loading, useful for slower networks or custom CDN configurations.

```tsx
<ReCaptcha
  sitekey="your-site-key"
  scriptOptions={{ timeout: 30000 }} // 30 seconds
/>
```

--------------------------------

### Svelte Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/friendly-captcha.mdx

Example of how to use FriendlyCaptcha in a Svelte application.

```svelte
<script lang="ts">
import FriendlyCaptcha from "@better-captcha/svelte/provider/friendly-captcha";
</script>

<FriendlyCaptcha sitekey="FCMTL-000000000000000000000" options={{}} />
```

--------------------------------

### Qwik Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/captcha-fox.mdx

Example of how to use CaptchaFox in a Qwik application.

```tsx
import { component$ } from "@builder.io/qwik";
import { CaptchaFox } from "@better-captcha/qwik/provider/captcha-fox";

export default component$(() => (
  <CaptchaFox sitekey="your-sitekey" options={{}} />
));
```

--------------------------------

### Vue Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/hcaptcha.mdx

Example of how to use HCaptcha in a Vue application.

```vue
<template>
    <HCaptcha
      sitekey="10000000-ffff-ffff-ffff-000000000001"
      :options="{ theme: 'dark' }"
    />
  </template>

  <script setup lang="ts">
  import { HCaptcha } from "@better-captcha/vue/provider/hcaptcha";
  </script>
```

--------------------------------

### SolidJS Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/turnstile.mdx

Example of using the Turnstile provider in a SolidJS application.

```tsx
import { Turnstile } from "@better-captcha/solidjs/provider/turnstile";

<Turnstile sitekey="1x00000000000000000000AA" options={{}} />
```

--------------------------------

### Qwik Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/geetest.mdx

Example of how to use the Geetest provider in a Qwik application.

```tsx
import { component$ } from "@builder.io/qwik";
import { Geetest } from "@better-captcha/qwik/provider/geetest";

export default component$(() => (
  <Geetest sitekey="647f5ed2ed8acb4be36784e01556bb71" options={{ language: "eng" }} />
));
```

--------------------------------

### React Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/prosopo.mdx

Example of how to use the Prosopo component in a React application.

```tsx
import { Prosopo } from "@better-captcha/react/provider/prosopo";

<Prosopo sitekey="no-testing-key" options={{}} />
```

--------------------------------

### Project Structure Example

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/testing/qwik/README.md

Illustrates the typical directory structure for a Qwik City project, including public, components, and routes.

```bash
├── public/
│   └── ...
└── src/
    ├── components/
    │   └── ...
    └── routes/
        └── ...
```

--------------------------------

### Vue Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/friendly-captcha.mdx

Example of how to use FriendlyCaptcha in a Vue application.

```vue
<template>
    <FriendlyCaptcha
      sitekey="FCMTL-000000000000000000000"
      :options="{ puzzleTimeout: 300 }"
    />
  </template>

  <script setup lang="ts">
  import { FriendlyCaptcha } from "@better-captcha/vue/provider/friendly-captcha";
  </script>
```

--------------------------------

### Qwik Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/recaptcha-v3.mdx

Example of using ReCaptchaV3 provider in a Qwik application.

```tsx
import { component$ } from "@builder.io/qwik";
import { ReCaptchaV3 } from "@better-captcha/qwik/provider/recaptcha-v3";

export default component$(() => (
  <ReCaptchaV3 sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" options={{ action: "submit" }} />
));
```

--------------------------------

### Svelte Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/turnstile.mdx

Example of using the Turnstile provider in a Svelte application.

```svelte
<script lang="ts">
import Turnstile from "@better-captcha/svelte/provider/turnstile";
</script>

<Turnstile sitekey="1x00000000000000000000AA" options={{}} />
```

--------------------------------

### SolidJS Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/recaptcha-v3.mdx

Example of using ReCaptchaV3 provider in a SolidJS application.

```tsx
import { ReCaptchaV3 } from "@better-captcha/solidjs/provider/recaptcha-v3";

<ReCaptchaV3 sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" options={{ action: "submit" }} />
```

--------------------------------

### Lit Usage (TS)

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/friendly-captcha.mdx

Example of how to import FriendlyCaptcha in a Lit application.

```ts
import { FriendlyCaptcha } from "@better-captcha/lit/provider/friendly-captcha";
```

--------------------------------

### Preview Command

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/testing/qwik/README.md

Command to preview a production build locally by creating client modules, an entry point for preview, and running a local server.

```shell
bun preview # or `bun preview`
```

--------------------------------

### Vue Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/turnstile.mdx

Example of using the Turnstile provider in a Vue application.

```vue
<template>
  <Turnstile
    sitekey="1x00000000000000000000AA"
    :options="{ theme: 'dark' }"
  />
</template>

<script setup lang="ts">
import { Turnstile } from "@better-captcha/vue/provider/turnstile";
</script>
```

--------------------------------

### SolidJS Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/geetest.mdx

Example of how to use the Geetest provider in a SolidJS application.

```tsx
import { Geetest } from "@better-captcha/solidjs/provider/geetest";

<Geetest sitekey="647f5ed2ed8acb4be36784e01556bb71" options={{ language: "eng" }} />
```

--------------------------------

### SolidJS Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/private-captcha.mdx

Example of how to use PrivateCaptcha in a SolidJS application.

```tsx
import { PrivateCaptcha } from "@better-captcha/solidjs/provider/private-captcha";

<form>
  <PrivateCaptcha sitekey="aaaaaaaabbbbccccddddeeeeeeeeeeee" options={{}} />
</form>
```

--------------------------------

### Vue Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/private-captcha.mdx

Example of how to use PrivateCaptcha in a Vue application.

```vue
<template>
  <form>
      <PrivateCaptcha
        sitekey="aaaaaaaabbbbccccddddeeeeeeeeeeee"
        :options="{ theme: 'light' }"
      />
    </form>
</template>

<script setup lang="ts">
import { PrivateCaptcha } from "@better-captcha/vue/provider/private-captcha";
</script>
```

--------------------------------

### Svelte Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/private-captcha.mdx

Example of how to use PrivateCaptcha in a Svelte application.

```svelte
<script lang="ts">
import PrivateCaptcha from "@better-captcha/svelte/provider/private-captcha";
</script>

<form>
  <PrivateCaptcha sitekey="aaaaaaaabbbbccccddddeeeeeeeeeeee" options={{}} />
</form>
```

--------------------------------

### Preact Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/prosopo.mdx

Example of how to use the Prosopo component in a Preact application.

```tsx
import { Prosopo } from "@better-captcha/preact/provider/prosopo";

<Prosopo sitekey="no-testing-key" options={{}} />
```

--------------------------------

### Lifecycle Callbacks

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/frameworks/preact.mdx

Example showing how to use lifecycle callbacks (onReady, onSolve, onError) with the ReCaptcha component.

```tsx
import { ReCaptcha } from "@better-captcha/preact/provider/recaptcha";

export default function Example() {
  const handleReady = () => {
    console.log("Captcha is ready");
  };

  const handleSolve = (token: string) => {
    console.log("Captcha solved with token:", token);
    // Send token to your backend for verification
  };

  const handleError = (error: Error | string) => {
    console.error("Captcha error:", error);
  };

  return (
    <ReCaptcha 
      sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
      onReady={handleReady}
      onSolve={handleSolve}
      onError={handleError}
    />
  );
}
```

--------------------------------

### Qwik Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/cap-widget.mdx

Example of how to use CapWidget in a Qwik application.

```tsx
import { component$ } from "@builder.io/qwik";
import { CapWidget } from "@better-captcha/qwik/provider/cap-widget";

export default component$(() => (
  <CapWidget endpoint="https://example.com/api/cap" options={{}} />
));
```

--------------------------------

### Vue Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/recaptcha-v3.mdx

Example of using ReCaptchaV3 provider in a Vue application.

```vue
<template>
  <ReCaptchaV3
    sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
    :options="{ action: 'submit' }"
  />
</template>

<script setup lang="ts">
import { ReCaptchaV3 } from "@better-captcha/vue/provider/recaptcha-v3";
</script>
```

--------------------------------

### SolidJS Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/captcha-fox.mdx

Example of how to use CaptchaFox in a SolidJS application.

```tsx
import { CaptchaFox } from "@better-captcha/solidjs/provider/captcha-fox";

<CaptchaFox sitekey="your-sitekey" options={{}} />
```

--------------------------------

### Vue Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/geetest.mdx

Example of how to use the Geetest provider in a Vue application.

```vue
<template>
  <Geetest
    sitekey="647f5ed2ed8acb4be36784e01556bb71"
    :options="{ language: 'eng' }"
  />
</template>

<script setup lang="ts">
import { Geetest } from "@better-captcha/vue/provider/geetest";
</script>
```

--------------------------------

### Svelte Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/captcha-fox.mdx

Example of how to use CaptchaFox in a Svelte application.

```svelte
<script lang="ts">
import CaptchaFox from "@better-captcha/svelte/provider/captcha-fox";
</script>

<CaptchaFox sitekey="your-sitekey" options={{}} />
```

--------------------------------

### SolidJS Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/cap-widget.mdx

Example of how to use CapWidget in a SolidJS application.

```tsx
import { CapWidget } from "@better-captcha/solidjs/provider/cap-widget";

<CapWidget endpoint="https://example.com/api/cap" options={{}} />
```

--------------------------------

### Svelte Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/recaptcha-v3.mdx

Example of using ReCaptchaV3 provider in a Svelte application.

```svelte
<script lang="ts">
import ReCaptchaV3 from "@better-captcha/svelte/provider/recaptcha-v3";
</script>

<ReCaptchaV3 sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" options={{ action: "submit" }} />
```

--------------------------------

### Svelte Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/geetest.mdx

Example of how to use the Geetest provider in a Svelte application.

```svelte
<script lang="ts">
import { Geetest } from "@better-captcha/svelte/provider/geetest";
</script>

<Geetest sitekey="647f5ed2ed8acb4be36784e01556bb71" options={{ language: "eng" }} />
```

--------------------------------

### Basic Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/frameworks/solidjs.mdx

Basic example of using the ReCaptcha component in a SolidJS application.

```tsx
import { ReCaptcha } from "@better-captcha/solidjs/provider/recaptcha";

export default function Example() {
  return <ReCaptcha sitekey="your-site-key" />;
}
```

--------------------------------

### Vue Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/captcha-fox.mdx

Example of how to use CaptchaFox in a Vue application.

```vue
<template>
    <CaptchaFox
      sitekey="your-sitekey"
      :options="{ lang: 'en' }"
    />
  </template>

  <script setup lang="ts">
  import { CaptchaFox } from "@better-captcha/vue/provider/captcha-fox";
  </script>
```

--------------------------------

### React Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/friendly-captcha.mdx

Example of how to use FriendlyCaptcha in a React application.

```tsx
import { FriendlyCaptcha } from "@better-captcha/react/provider/friendly-captcha";

<FriendlyCaptcha sitekey="" options={{}} />
```

--------------------------------

### Lit Usage (JS Module)

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/cap-widget.mdx

Example of importing CapWidget in a Lit application.

```ts
import { CapWidget } from "@better-captcha/lit/provider/cap-widget";
```

--------------------------------

### React Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/recaptcha-v3.mdx

Example of using ReCaptchaV3 provider in a React application.

```tsx
import { ReCaptchaV3 } from "@better-captcha/react/provider/recaptcha-v3";

<ReCaptchaV3 sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" options={{ action: "submit" }} />
```

--------------------------------

### Vue Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/cap-widget.mdx

Example of how to use CapWidget in a Vue application.

```vue
<template>
  <CapWidget
    endpoint="https://example.com/api/cap"
    :options="{}"
  />
</template>

<script setup lang="ts">
import { CapWidget } from "@better-captcha/vue/provider/cap-widget";
</script>
```

--------------------------------

### Run for Production

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/testing/react/README.md

Command to run the project for production using Bun.

```bash
bun start
```

--------------------------------

### Preact Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/friendly-captcha.mdx

Example of how to use FriendlyCaptcha in a Preact application.

```tsx
import { FriendlyCaptcha } from "@better-captcha/preact/provider/friendly-captcha";

<FriendlyCaptcha sitekey="" options={{}} />
```

--------------------------------

### Lit Usage (HTML)

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/turnstile.mdx

Example of using the Turnstile provider in a Lit application's HTML.

```html
<turnstile-captcha sitekey="1x00000000000000000000AA"></turnstile-captcha>
```

--------------------------------

### Svelte Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/cap-widget.mdx

Example of how to use CapWidget in a Svelte application.

```svelte
<script lang="ts">
import CapWidget from "@better-captcha/svelte/provider/cap-widget";
</script>

<CapWidget endpoint="https://example.com/api/cap" options={{}} />
```

--------------------------------

### React Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/geetest.mdx

Example of how to use the Geetest provider in a React application.

```tsx
import { Geetest } from "@better-captcha/react/provider/geetest";

<Geetest sitekey="647f5ed2ed8acb4be36784e01556bb71" options={{ language: "eng" }} />
```

--------------------------------

### Qwik Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/recaptcha.mdx

Example of using the ReCaptcha provider in a Qwik application.

```tsx
import { component$ } from "@builder.io/qwik";
import { ReCaptcha } from "@better-captcha/qwik/provider/recaptcha";

export default component$(() => (
  <ReCaptcha sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" options={{}} />
));
```

--------------------------------

### Lit Usage (HTML)

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/friendly-captcha.mdx

Example of how to use FriendlyCaptcha as a custom element in a Lit application.

```html
<friendly-captcha sitekey="FCMTL-000000000000000000000"></friendly-captcha>
```

--------------------------------

### Preact Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/recaptcha-v3.mdx

Example of using ReCaptchaV3 provider in a Preact application.

```tsx
import { ReCaptchaV3 } from "@better-captcha/preact/provider/recaptcha-v3";

<ReCaptchaV3 sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" options={{ action: "submit" }} />
```

--------------------------------

### Lit Usage (HTML Tag)

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/prosopo.mdx

Example of using the Prosopo custom element in HTML for Lit.

```html
<prosopo-captcha sitekey="no-testing-key"></prosopo-captcha>
```

--------------------------------

### Preact Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/geetest.mdx

Example of how to use the Geetest provider in a Preact application.

```tsx
import { Geetest } from "@better-captcha/preact/provider/geetest";

<Geetest sitekey="647f5ed2ed8acb4be36784e01556bb71" options={{ language: "eng" }} />
```

--------------------------------

### React Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/cap-widget.mdx

Example of how to use CapWidget in a React application.

```tsx
import { CapWidget } from "@better-captcha/react/provider/cap-widget";

<CapWidget endpoint="https://example.com/api/cap" options={{}} />
```

--------------------------------

### SolidJS Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/recaptcha.mdx

Example of using the ReCaptcha provider in a SolidJS application.

```tsx
import { ReCaptcha } from "@better-captcha/solidjs/provider/recaptcha";

<ReCaptcha sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" options={{}} />
```

--------------------------------

### Basic Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/frameworks/react.mdx

Basic example of using the ReCaptcha component in a React application.

```tsx
import { ReCaptcha } from "@better-captcha/react/provider/recaptcha";

export default function Example() {
  return <ReCaptcha sitekey="your-site-key" />;
}
```

--------------------------------

### Basic Usage - HTML

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/frameworks/lit.mdx

Example of using the recaptcha-captcha custom element in HTML.

```html
<recaptcha-captcha sitekey="your-site-key"></recaptcha-captcha>
```

--------------------------------

### Lit Usage (HTML Element)

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/geetest.mdx

Example of using the Geetest custom element in Lit.

```html
<geetest-captcha sitekey="647f5ed2ed8acb4be36784e01556bb71" .options={{ language: "eng" }}></geetest-captcha>
```

--------------------------------

### Basic Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/frameworks/preact.mdx

Basic example of using the ReCaptcha component in a Preact application.

```tsx
import { ReCaptcha } from "@better-captcha/preact/provider/recaptcha";

export default function Example() {
  return <ReCaptcha sitekey="your-site-key" />;
}
```

--------------------------------

### Qwik Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/t-sec.mdx

Example of how to use the TSec component in a Qwik application.

```tsx
import { component$ } from "@builder.io/qwik";
import { TSec } from "@better-captcha/qwik/provider/t-sec";

export default component$(() => (
  <TSec sitekey="YOUR_SITEKEY_HERE" options={{ userLanguage: "en" }} />
));
```

--------------------------------

### Manual Rendering

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/frameworks/solidjs.mdx

Example of disabling auto-rendering and manually triggering the captcha render using the controller.

```tsx
import { ReCaptcha, createCaptchaController } from "@better-captcha/solidjs/provider/recaptcha";

export default function Example() {
  const controller = createCaptchaController();

  return (
    <>
      <ReCaptcha 
        sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" 
        controller={controller} 
        autoRender={false} 
      />
      <button onClick={async () => await controller.handle()?.render()}>Show Captcha</button>
    </>
  );
}
```

--------------------------------

### Development Command

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/testing/qwik/README.md

Command to start the development server for a Qwik app, which uses Vite and performs server-side rendering (SSR) during development.

```shell
npm start # or `bun start`
```

--------------------------------

### Lit Usage (HTML Element)

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/cap-widget.mdx

Example of using the CapWidget custom element in Lit.

```html
<cap-widget-captcha endpoint="https://example.com/api/cap"></cap-widget-captcha>
```

--------------------------------

### Better Auth Configuration with Captcha Plugin

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/examples/better-auth/README.md

Configuration of Better Auth instance with the captcha plugin, specifying Cloudflare Turnstile as the provider and setting up endpoints.

```typescript
import { betterAuth } from "better-auth";
import { captcha } from "better-auth/plugins";

export const auth = betterAuth({
  database: memoryAdapter,
  emailAndPassword: {
    enabled: true,
  },
  plugins: [
    captcha({
      provider: "cloudflare-turnstile",
      secretKey: process.env.TURNSTILE_SECRET_KEY || "1x0000000000000000000000000000000AA",
      endpoints: ["/sign-in/email", "/sign-up/email"],
    }),
  ],
});
```

--------------------------------

### Preact Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/hcaptcha.mdx

Example of how to use HCaptcha in a Preact application.

```tsx
import { HCaptcha } from "@better-captcha/preact/provider/hcaptcha";

<HCaptcha sitekey="10000000-ffff-ffff-ffff-000000000001" options={{}} />
```

--------------------------------

### React Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/hcaptcha.mdx

Example of how to use HCaptcha in a React application.

```tsx
import { HCaptcha } from "@better-captcha/react/provider/hcaptcha";

<HCaptcha sitekey="10000000-ffff-ffff-ffff-000000000001" options={{}} />
```

--------------------------------

### Production Build Command

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/testing/qwik/README.md

Command to generate production-ready client and server modules for a Qwik app, including a type check.

```shell
bun build # or `bun build`
```

--------------------------------

### Add Integrations Command

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/testing/qwik/README.md

Command to add integrations to a Qwik project, such as Cloudflare, Netlify, Express Server, or Static Site Generator (SSG).

```shell
bun qwik add # or `bun qwik add`
```

--------------------------------

### Lifecycle Callbacks

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/frameworks/solidjs.mdx

Example showing how to use lifecycle callbacks (onReady, onSolve, onError) with the ReCaptcha component in SolidJS.

```tsx
import { ReCaptcha, type ReCaptchaHandle, createCaptchaController } from "@better-captcha/solidjs/provider/recaptcha";

export default function Example() {
  const controller = createCaptchaController<ReCaptchaHandle>();

  const handleReady = (handle: ReCaptchaHandle) => {
    console.log("Captcha is ready", handle);
  };

  const handleSolve = (token: string) => {
    console.log("Captcha solved with token:", token);
    // Send token to your backend for verification
  };

  const handleError = (error: Error) => {
    console.error("Captcha error:", error);
  };

  return (
    <ReCaptcha
      sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
      controller={controller}
      onReady={handleReady}
      onSolve={handleSolve}
      onError={handleError}
    />
  );
}
```

--------------------------------

### Preact Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/turnstile.mdx

Example of using the Turnstile provider in a Preact application.

```tsx
import { Turnstile } from "@better-captcha/preact/provider/turnstile";

<Turnstile sitekey="1x00000000000000000000AA" options={{}} />
```

--------------------------------

### React Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/turnstile.mdx

Example of using the Turnstile provider in a React application.

```tsx
import { Turnstile } from "@better-captcha/react/provider/turnstile";

<Turnstile sitekey="1x00000000000000000000AA" options={{}} />
```

--------------------------------

### Preact Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/private-captcha.mdx

Example of how to use PrivateCaptcha in a Preact application.

```tsx
import { PrivateCaptcha } from "@better-captcha/preact/provider/private-captcha";

<form>
  <PrivateCaptcha sitekey="aaaaaaaabbbbccccddddeeeeeeeeeeee" options={{}} />
</form>
```

--------------------------------

### React Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/private-captcha.mdx

Example of how to use PrivateCaptcha in a React application.

```tsx
import { PrivateCaptcha } from "@better-captcha/react/provider/private-captcha";

<form>
  <PrivateCaptcha sitekey="aaaaaaaabbbbccccddddeeeeeeeeeeee" options={{}} />
</form>
```

--------------------------------

### Lifecycle Callbacks

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/frameworks/qwik.mdx

Implementing lifecycle callbacks (onReady$, onSolve$, onError$) for the ReCaptcha component in Qwik.

```tsx
import { component$, $ } from "@builder.io/qwik";
import { useCaptchaController } from "@better-captcha/qwik";
import { ReCaptcha, type ReCaptchaHandle } from "@better-captcha/qwik/provider/recaptcha";

export default component$(() => {
  const controller = useCaptchaController<ReCaptchaHandle>();

  const handleReady$ = $((handle: ReCaptchaHandle) => {
    console.log("Captcha is ready", handle);
  });

  const handleSolve$ = $((token: string) => {
    console.log("Captcha solved with token:", token);
    // Send token to your backend for verification
  });

  const handleError$ = $((error: Error) => {
    console.error("Captcha error:", error);
  });

  return (
    <ReCaptcha
      sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
      controller={controller}
      onReady$={handleReady$}
      onSolve$={handleSolve$}
      onError$={handleError$}
    />
  );
});
```

--------------------------------

### Lifecycle Callbacks

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/frameworks/react.mdx

Example showing how to use lifecycle callbacks (`onReady`, `onSolve`, `onError`) for the ReCaptcha component.

```tsx
import { ReCaptcha } from "@better-captcha/react/provider/recaptcha";

export default function Example() {
  const handleReady = () => {
    console.log("Captcha is ready");
  };

  const handleSolve = (token: string) => {
    console.log("Captcha solved with token:", token);
    // Send token to your backend for verification
  };

  const handleError = (error: Error | string) => {
    console.error("Captcha error:", error);
  };

  return (
    <ReCaptcha 
      sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
      onReady={handleReady}
      onSolve={handleSolve}
      onError={handleError}
    />
  );
}
```

--------------------------------

### Lit Usage (Component Import)

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/recaptcha-v3.mdx

Importing the ReCaptchaV3 provider for Lit.

```ts
import { ReCaptchaV3 } from "@better-captcha/lit/provider/recaptcha-v3";
```

--------------------------------

### Preact Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/captcha-fox.mdx

Example of how to use CaptchaFox in a Preact application.

```tsx
import { CaptchaFox } from "@better-captcha/preact/provider/captcha-fox";

<CaptchaFox sitekey="your-sitekey" options={{}} />
```

--------------------------------

### React Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/captcha-fox.mdx

Example of how to use CaptchaFox in a React application.

```tsx
import { CaptchaFox } from "@better-captcha/react/provider/captcha-fox";

<CaptchaFox sitekey="your-sitekey" options={{}} />
```

--------------------------------

### Lit Usage (Component Import)

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/provider/geetest.mdx

Importing the Geetest provider for use in a Lit application.

```ts
import { Geetest } from "@better-captcha/lit/provider/geetest";
```

--------------------------------

### Basic usage with reCAPTCHA

Source: https://github.com/luggapugga/better-captcha/blob/main/packages/lit/README.md

Import and use the reCAPTCHA component, get its handle, and access methods like 'getHandle'.

```ts
import { ReCaptcha } from "@better-captcha/lit/provider/recaptcha";

// The component is automatically registered as a custom element named "recaptcha-captcha"
const captcha = document.querySelector('recaptcha-captcha');
const handle = captcha.getHandle();
```

--------------------------------

### Setting Options - Via Attributes

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/frameworks/lit.mdx

Configuring the captcha widget using attributes for simple values.

```html
<!-- Via attributes (for simple values) -->
<recaptcha-captcha sitekey="your-site-key"></recaptcha-captcha>
```

--------------------------------

### Setting Options - Via Properties

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/en/frameworks/lit.mdx

Configuring the captcha widget using properties for complex objects.

```typescript
// Via properties (for complex objects)
const captcha = document.querySelector('recaptcha-captcha');
captcha.options = { theme: 'dark', size: 'compact' };
captcha.scriptOptions = { autoLoad: false, timeout: 30000 };
```

--------------------------------

### Qwik Usage

Source: https://github.com/luggapugga/better-captcha/blob/main/apps/docs/content/docs/cn/script-options.mdx

Example of using ReCaptcha component in Qwik with custom script options.

```tsx
import { component$ } from "@builder.io/qwik";
import { ReCaptcha } from "@better-captcha/qwik/provider/recaptcha";

export default component$(() => (
  <ReCaptcha
    sitekey="your-site-key"
    scriptOptions={{ autoLoad: false, timeout: 30000 }}
  />
));
```