@vycecap/react

React component for Vyce Captcha - Privacy-first invisible CAPTCHA using Proof-of-Work and AI.

Installation

npm install @vycecap/react

Quick Start

1. Load the Vyce Script

Add the Vyce script to your HTML or use a script loader:

<script src="https://vyce.cc/vyce.js" async defer></script>

Or in React:

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://vyce.cc/vyce.js';
    script.async = true;
    document.head.appendChild(script);
    return () => { document.head.removeChild(script); };
  }, []);
  
  return <MyForm />;
}

2. Use the Component

import { VyceCaptcha } from '@vycecap/react';

function MyForm() {
  const [token, setToken] = useState<string | null>(null);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!token) return alert('Please complete the captcha');
    
    // Submit form with token
    fetch('/api/submit', {
      method: 'POST',
      body: JSON.stringify({ vyce_token: token, ...formData }),
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" required />
      
      <VyceCaptcha
        sitekey="your-site-key"
        mode="checkbox"
        onVerify={setToken}
        onError={(err) => console.error('Captcha error:', err)}
      />
      
      <button type="submit" disabled={!token}>
        Submit
      </button>
    </form>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | sitekey | string | required | Your site key from Vyce dashboard | | mode | 'checkbox' \| 'auto' \| 'invisible' | 'checkbox' | Widget display mode | | lang | string | 'en' | Language code | | onVerify | (token: string) => void | - | Called on successful verification | | onError | (error: string) => void | - | Called on verification failure | | onExpire | () => void | - | Called when token expires | | className | string | - | Additional CSS classes | | style | React.CSSProperties | - | Inline styles |

Ref Methods

Use a ref to control the widget programmatically:

import { useRef } from 'react';
import { VyceCaptcha, VyceCaptchaRef } from '@vycecap/react';

function MyForm() {
  const captchaRef = useRef<VyceCaptchaRef>(null);

  const handleReset = () => {
    captchaRef.current?.reset();
  };

  const handleInvisibleSubmit = async () => {
    const token = await captchaRef.current?.execute();
    // Submit with token
  };

  return (
    <>
      <VyceCaptcha
        ref={captchaRef}
        sitekey="your-site-key"
        mode="invisible"
        onVerify={(token) => console.log('Verified:', token)}
      />
      <button onClick={handleReset}>Reset</button>
      <button onClick={handleInvisibleSubmit}>Submit</button>
    </>
  );
}

| Method | Returns | Description | |--------|---------|-------------| | getToken() | string \| null | Get current verification token | | reset() | void | Reset widget to initial state | | execute() | Promise<string> | Manually trigger verification (invisible mode) |

Modes

Checkbox Mode (Default)

User clicks "I am human" checkbox to verify.

<VyceCaptcha sitekey="..." mode="checkbox" onVerify={setToken} />

Auto Mode

Automatically verifies when the widget loads.

<VyceCaptcha sitekey="..." mode="auto" onVerify={setToken} />

Invisible Mode

Hidden widget, trigger verification programmatically.

<VyceCaptcha ref={captchaRef} sitekey="..." mode="invisible" />
// Later: await captchaRef.current.execute()

Supported Languages

en, de, es, fr, pt, it, nl, pl, ru, zh, ja

Next.js Example

// pages/contact.tsx
import { VyceCaptcha } from '@vycecap/react';
import Script from 'next/script';

export default function Contact() {
  const [token, setToken] = useState<string | null>(null);

  return (
    <>
      <Script src="https://vyce.cc/vyce.js" strategy="lazyOnload" />
      
      <form>
        <VyceCaptcha
          sitekey={process.env.NEXT_PUBLIC_VYCE_SITEKEY!}
          onVerify={setToken}
        />
      </form>
    </>
  );
}

License

MIT © Vyce Captcha