Private Captcha React Component

A React component for integrating Private Captcha's client-side proof-of-work captcha into your React applications.

Installation

npm install @private-captcha/private-captcha-react

Basic Usage

NOTE: Captcha component is only being rendered inside the form

import React from 'react';
import { PrivateCaptcha } from '@private-captcha/private-captcha-react';

function MyForm() {
  const handleCaptchaFinished = (detail) => {
    console.log('Captcha solved!', detail.widget.solution());
    // Submit your form here or enable the submit button
  };

  return (
    <form>
      <input type="text" name="username" placeholder="Username" />
      <input type="password" name="password" placeholder="Password" />

      <PrivateCaptcha
        siteKey="your-site-key-here"
        theme="dark"
        onFinish={handleCaptchaFinished}
      />

      <button type="submit">Login</button>
    </form>
  );
}

Props API

Required Props

Prop	Type	Description
siteKey	string	Your Private Captcha site key

Optional Props

Please refer to the official widget options documentation.

Event Handler Props

All event handler functions receive a detail object with these properties:

• detail.widget - The captcha widget instance with methods:
  • start() - Start solving the captcha
  • reset() - Reset the captcha
  • solution() - Get the current solution string
• detail.element - The DOM element hosting the captcha

Prop	Type	Description
onInit	(detail) => void	Called when captcha is initialized
onStart	(detail) => void	Called when solving starts
onFinish	(detail) => void	Called when solving completes
onError	(detail) => void	Called when an error occurs

Examples

EU-isolation

<PrivateCaptcha
  siteKey="your-site-key"
  eu={true}
/>

Requirements

• React 18+

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For issues with this React component, please open an issue on GitHub.

For Private Captcha service questions, visit privatecaptcha.com.