JSPM

@vycecap/react

1.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 16
  • Score
    100M100P100Q58670F
  • License MIT

React component for Vyce Captcha - Privacy-first invisible CAPTCHA

Package Exports

  • @vycecap/react

Readme

@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