Modern React CAPTCHA Component with Intelligence

Advanced human verification through intelligent behavior analysis, gesture tracking, and fallback text-based verification. Zero CSS imports required.

Get Started Try Demo
v1.1.0 â€ĸ MIT Licensed
🔒
Analyzing behavior...

Powerful Features

🤖

Intelligent Behavior Analysis

Advanced real-time gesture and interaction tracking that distinguishes human behavior from bot patterns.

🖱ī¸

Mouse Movement Tracking

Analyzes cursor patterns, velocity, acceleration, and natural variations in movement.

👆

Touch Gesture Recognition

Detects multi-touch gestures, pressure sensitivity, and natural mobile interactions.

⌨ī¸

Keyboard Pattern Analysis

Monitors typing rhythm, keystroke timing, and natural typing variations.

📜

Scroll Behavior Monitoring

Tracks natural scrolling patterns and content engagement behaviors.

🎨

SVG-based CAPTCHA

Beautiful vector graphics with advanced distortion effects and anti-OCR noise patterns.

🔒

Advanced Fallback System

High-quality SVG-rendered CAPTCHA with dynamic styling when automatic verification needs confirmation.

📱

Responsive Design

Works seamlessly across desktop, tablet, and mobile devices with adaptive UI.

⚡

TypeScript Support

Full TypeScript definitions with comprehensive type safety and IntelliSense.

🔧

Development Tools

Built-in version management, pre-commit hooks, and automated semantic versioning.

Interactive Demo

Experience the CAPTCHA component in action. Move your mouse, scroll, or interact with the page to see intelligent behavior analysis.

Interaction Stats

Mouse Movements 0
Clicks 0
Scroll Events 0
Keystrokes 0
Device Type Desktop
Human Score 0%
🔒

CAPTCHA Demo

Click "Show CAPTCHA" to test the component

Results

Ready to test CAPTCHA...

Installation

1

Install via npm

npm install simplify-captcha
2

Import in your React component

import React, { useRef } from 'react';
import { SimplifyCaptcha, SimplifyCaptchaRef } from 'simplify-captcha';
3

Use the component

function MyComponent() {
  const captchaRef = useRef<SimplifyCaptchaRef>(null);

  const handleCaptchaResult = (event: { nativeEvent: { data: string } }) => {
    const { data } = event.nativeEvent;
    
    switch (data) {
      case 'verified':
        console.log('✅ User verified successfully!');
        break;
      case 'cancel':
        console.log('❌ User cancelled verification');
        break;
      default:
        console.log('ℹī¸ Unknown result:', data);
    }
  };

  return (
    <div>
      <SimplifyCaptcha
        ref={captchaRef}
        onMessage={handleCaptchaResult}
      />
      <button onClick={() => captchaRef.current?.show()}>
        Show CAPTCHA
      </button>
    </div>
  );
}
💡
No CSS imports required! The component automatically injects its styles when used.

API Reference

SimplifyCaptchaProps

Property Type Required Description
onMessage (event: { nativeEvent: { data: string } }) => void ✅ Callback function called when CAPTCHA state changes
style React.CSSProperties ❌ Custom inline styles for the component
className string ❌ CSS class name for custom styling

SimplifyCaptchaRef

Method Type Description
show() () => void Shows the CAPTCHA verification dialog
hide() () => void Hides the CAPTCHA verification dialog

Event Data Values

Value Description
'verified' User successfully passed verification
'cancel' User cancelled the verification process
'failed' Verification failed (too many attempts)

Utility Functions

import { injectStyles } from 'simplify-captcha';

// Manually inject styles (usually not needed)
injectStyles();

Examples

Basic Usage

import React, { useRef } from 'react';
import { SimplifyCaptcha, SimplifyCaptchaRef } from 'simplify-captcha';

function LoginForm() {
  const captchaRef = useRef<SimplifyCaptchaRef>(null);

  const handleLogin = () => {
    // Show CAPTCHA before login
    captchaRef.current?.show();
  };

  const handleCaptchaResult = (event: { nativeEvent: { data: string } }) => {
    if (event.nativeEvent.data === 'verified') {
      // Proceed with login
      console.log('CAPTCHA verified, proceeding with login...');
    }
  };

  return (
    <div>
      <SimplifyCaptcha
        ref={captchaRef}
        onMessage={handleCaptchaResult}
      />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

With Custom Styling

import React, { useRef } from 'react';
import { SimplifyCaptcha, SimplifyCaptchaRef } from 'simplify-captcha';

function StyledCaptcha() {
  const captchaRef = useRef<SimplifyCaptchaRef>(null);

  const customStyle: React.CSSProperties = {
    border: '2px solid #007bff',
    borderRadius: '8px',
    backgroundColor: '#f8f9fa'
  };

  return (
    <SimplifyCaptcha
      ref={captchaRef}
      style={customStyle}
      className="my-custom-captcha"
      onMessage={(event) => {
        console.log('CAPTCHA result:', event.nativeEvent.data);
      }}
    />
  );
}

Form Integration

import React, { useRef, useState } from 'react';
import { SimplifyCaptcha, SimplifyCaptchaRef } from 'simplify-captcha';

function ContactForm() {
  const captchaRef = useRef<SimplifyCaptchaRef>(null);
  const [isVerified, setIsVerified] = useState(false);
  const [formData, setFormData] = useState({ name: '', email: '', message: '' });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!isVerified) {
      captchaRef.current?.show();
      return;
    }
    // Submit form
    console.log('Submitting form...', formData);
  };

  const handleCaptchaResult = (event: { nativeEvent: { data: string } }) => {
    if (event.nativeEvent.data === 'verified') {
      setIsVerified(true);
      // Auto-submit form after verification
      console.log('CAPTCHA verified, submitting form...');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Name"
        value={formData.name}
        onChange={(e) => setFormData({...formData, name: e.target.value})}
      />
      <input
        type="email"
        placeholder="Email"
        value={formData.email}
        onChange={(e) => setFormData({...formData, email: e.target.value})}
      />
      <textarea
        placeholder="Message"
        value={formData.message}
        onChange={(e) => setFormData({...formData, message: e.target.value})}
      />
      
      <SimplifyCaptcha
        ref={captchaRef}
        onMessage={handleCaptchaResult}
      />
      
      <button type="submit">
        {isVerified ? '✅ Send Message' : 'Send Message'}
      </button>
    </form>
  );
}