ReCAPTZ - Modern CAPTCHA for React

ReCAPTZ

The Modern CAPTCHA Solution for React Applications

A beautiful, customizable, and secure CAPTCHA component with multiple verification types, perfect for protecting your forms and user interactions.

View Demos Documentation

Secure by Design

Built with security best practices and customizable validation rules

Accessibility First

Screen reader support, keyboard navigation, and audio feedback

Developer Friendly

TypeScript support, comprehensive documentation, and easy integration

Zero Dependencies

Minimal bundle size with no external dependencies

Interactive Demos

Example Code Here

Basic Types

Numbers Only

Perfect for numeric verification

Security Check

Press Space to hear the code • Enter to validate • Esc to clear

Status: Awaiting verification

Letters Only

Alphabetic verification challenge

Security Check

Press Space to hear the code • Enter to validate • Esc to clear

Status: Awaiting verification

Custom Characters

Fully customizable character set

Security Check

Press Space to hear the code • Enter to validate • Esc to clear

Status: Awaiting verification

ABCDEF123456(case sensitive)

Mixed Characters

Combined letters and numbers

Security Check

Press Space to hear the code • Enter to validate • Esc to clear

Status: Awaiting verification

Advanced Features

Timed CAPTCHA

Complete within time limit

Security Check

30s

Press Space to hear the code • Enter to validate • Esc to clear

Status: Complete within 30 seconds

Accessible CAPTCHA

With audio support and keyboard navigation

Security Check

Press Space to hear the code • Enter to validate • Esc to clear

Press Space to hear the code

Status: Awaiting verification

Customization Examples

Dark Mode

Elegant dark theme design

Security Check

Press Space to hear the code • Enter to validate • Esc to clear

Status: Awaiting verification

Complex Validation

Custom validation rules

Security Check

Press Space to hear the code • Enter to validate • Esc to clear

Status: Awaiting verification

• Must contain A-F and 1-6
• Case sensitive
• Length: 6 characters

Getting Started

Installation

npm install recaptz

Basic Usage

import { Captcha } from 'recaptz';

function App() {
  const handleValidate = (isValid: boolean) => {
    if (isValid) {
      console.log('CAPTCHA validated successfully');
    }
  };

  return (
    <Captcha
      type="mixed"
      length={6}
      onValidate={handleValidate}
    />
  );
}

Props

Prop	Type	Default	Description
`type`	`'numbers' \| 'letters' \| 'mixed'`	`'mixed'`	Type of CAPTCHA to generate
`length`	`number`	`6`	Length of CAPTCHA text
`onChange`	`(value: string) => void`	`-`	Callback when input changes
`onValidate`	`(isValid: boolean) => void`	`-`	Callback when validation occurs
`className`	`string`	`''`	Additional CSS classes
`refreshable`	`boolean`	`true`	Whether CAPTCHA can be refreshed
`caseSensitive`	`boolean`	`false`	Case-sensitive validation
`customCharacters`	`string`	`-`	Custom character set
`customStyles`	`React.CSSProperties`	`-`	Custom inline styles
`validationRules`	`ValidationRules`	`-`	Custom validation rules
`darkMode`	`boolean`	`false`	Enable dark mode theme
`autoFocus`	`boolean`	`false`	Auto-focus the input field
`showSuccessAnimation`	`boolean`	`false`	Show success animation
`refreshInterval`	`number`	`-`	Auto-refresh interval in seconds
`maxAttempts`	`number`	`-`	Maximum validation attempts
`inputButtonStyle`	`string`	`-`	Input button styles
`enableAudio`	`boolean`	`true`	Enable Audio

Validation Rules

The validationRules prop accepts an object with the following properties:

interface ValidationRules {
  minLength?: number;
  maxLength?: number;
  allowedCharacters?: string;
  required?: boolean;
  caseSensitive?: boolean;
  customValidator?: (value: string) => boolean | string;
}

Styling

Customize the appearance using the className and customStyles props:

<Captcha
  className="my-custom-class"
  customStyles={{
    backgroundColor: '#f8f9fa',
    borderRadius: '8px',
    padding: '20px'
  }}
  darkMode={true}
/>

Keyboard Shortcuts

Space

Hear the CAPTCHA code

Enter

Validate the input

Escape

Clear the input

TypeScript Support

Import types directly from the package:

import type { CaptchaProps, ValidationRules } from 'recaptz';

Error Handling

The component handles various error cases and provides feedback:

Invalid input length
Character mismatch
Required field validation
Custom validation rules

Browser Support

Works seamlessly across all modern browsers

Chrome

Latest

Firefox

Latest

Safari

Latest

Edge

Latest

Opera

Latest