AI Captcha React Component

A React component for integrating AI CAPTCHA verification into your applications. This component provides both standard widget and programmatic integration options with a clean, modern interface.

Installation

Install the package using npm:

npm install @aicaptcha/react-aicaptcha

Or using yarn:

yarn add @aicaptcha/react-aicaptcha

Quick Start

Standard Widget Integration

The standard integration displays the AI CAPTCHA widget directly in your component:

import React from 'react';
import { AiCaptcha } from '@aicaptcha/react-aicaptcha';

function App() {
  const handleCaptchaSuccess = (token: string) => {
    console.log('CAPTCHA verified successfully:', token);
    // Handle successful verification
  };

  const handleCaptchaError = (error: string) => {
    console.error('CAPTCHA verification failed:', error);
    // Handle verification error
  };

  return (
    <div>
      <h1>My App</h1>
      <AiCaptcha
        sitekey="your-sitekey-here"
        size="normal"
        onPass={handleCaptchaSuccess}
        onError={handleCaptchaError}
      />
    </div>
  );
}

export default App;

Programmatic Integration

For more control over when the CAPTCHA is triggered, use the programmatic approach with an invisible widget:

import React, { useRef } from 'react';
import { AiCaptcha, AiCaptchaRef } from '@aicaptcha/react-aicaptcha';

function App() {
  const captchaRef = useRef<AiCaptchaRef>(null);

  const handleCaptchaSuccess = (token: string) => {
    console.log('CAPTCHA verified successfully:', token);
    // Process the verification token
  };

  const handleCaptchaError = (error: string) => {
    console.error('CAPTCHA verification failed:', error);
    // Handle the error appropriately
  };

  const triggerCaptcha = () => {
    if (captchaRef.current) {
      captchaRef.current.execute();
    }
  };

  return (
    <div>
      <h1>My App</h1>
      <AiCaptcha
        sitekey="your-sitekey-here"
        size="invisible"
        onPass={handleCaptchaSuccess}
        onError={handleCaptchaError}
        ref={captchaRef}
      />
      <button onClick={triggerCaptcha} type="button">
        Verify Human
      </button>
    </div>
  );
}

export default App;

API Reference

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | sitekey | string | Yes | - | Your site key obtained from the AI Captcha dashboard | | size | 'normal' \| 'invisible' \| compact | No | 'normal' | Display mode of the CAPTCHA widget | | theme | 'light' \| 'dark' | No | 'light' | Theme setting| | hl | Language identifier | No | - | Optional. If no language is specified, the user's language will be automatically detected| | onPass | (token: string) => void | No | - | Callback fired when CAPTCHA is successfully verified | | onError | (error: string) => void | No | - | Callback fired when CAPTCHA verification fails | | onExpired | () => void | No | - | Callback when verification response expires. | | onClose | () => void | No | - | When the user dismisses a challenge. | | onOpen | () => void | No | - | When the user display of a challenge starts. | | onChalExpired | () => void | No | - | Called when the user display of a challenge times out with no answer. |

Ref Methods

When using a ref with the AiCaptcha component, you get access to:

| Method | Description | |--------|-------------| | execute() | Programmatically trigger the CAPTCHA challenge | | reset() | Reset the CAPTCHA widget to its initial state | | getResponse() | Gets the response for the Captcha widget |

TypeScript Support

This package includes TypeScript definitions out of the box. Import the types as needed:

import { AiCaptcha, AiCaptchaRef, AiCaptchaProps } from '@aicaptcha/react-aicaptcha';

Browser Support

• Modern browsers with ES2015+ support
• React 16.8+ (hooks support required)
• TypeScript 3.8+ (optional)

Support

For questions, issues, or feature requests:

• 📧 Email: [email protected]
• 📖 Documentation: Full Documentation