Docs
Integrations
React

React

Note

You can use a “default way” of adding <div class="private-captcha" ...></div> element with https://cdn.privatecaptcha.com/widget/js/privatecaptcha.js Javascript include. But it will not work well with server-side rendering (e.g. in Next.js).

This is a client-side SDK for React, which is an alternative to using a standard script directly.

GitHub repository

Installation 

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

Basic Usage 

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 - captcha object
  • 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

For EU isolation you need to add eu="true" attribute to the widget declaration:

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

Requirements

  • React 18+
Last updated on
.NETPython