Installation

pnpm add @007captcha/client @007captcha/react

Both packages are required — @007captcha/client is a peer dependency.

Usage

import { OOSevenCaptcha } from '@007captcha/react';

function LoginForm() {
  const handleSuccess = (token: string) => {
    fetch('/verify', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ token }),
    });
  };

  return (
    <form>
      <OOSevenCaptcha
        siteKey="your-secret-key"
        method="ball"
        serverUrl={window.location.origin}
        onSuccess={handleSuccess}
      />
      <button type="submit">Log in</button>
    </form>
  );
}

With Dark Theme

<OOSevenCaptcha
  siteKey="your-secret-key"
  serverUrl="/api"
  theme="dark"
  onSuccess={handleSuccess}
  onFailure={(err) => console.error(err.message)}
/>

Random Method

<OOSevenCaptcha
  siteKey="your-secret-key"
  serverUrl={window.location.origin}
  method="random"
  onSuccess={handleSuccess}
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | siteKey | string | required | Secret key shared with server | | serverUrl | string | required | Base URL for captcha server endpoints | | method | 'ball' \| 'shape' \| 'maze' \| 'random' | 'random' | Challenge method | | theme | 'light' \| 'dark' \| 'auto' | 'light' | Color theme | | timeLimit | number | varies | Override time limit in ms | | className | string | — | CSS class applied to the wrapper <div> | | onSuccess | (token: string) => void | — | Called with signed token on pass | | onFailure | (error: Error) => void | — | Called on challenge failure | | onExpired | () => void | — | Called when a token expires |

The component automatically handles mounting, cleanup, and re-initialization when siteKey, method, theme, or timeLimit change.

Requirements

• React 18+
• A running @007captcha/server instance. See the server package for setup.

License

MIT