Captscii NPM | npm.io

Captscii

Captscii is a modern, customizable ASCII CAPTCHA solution that provides accessibility, customization, and multiple rendering options, including ASCII and emoji-based CAPTCHAs.

Features

ASCII and Emoji rendering modes
Customizable rules
Diffusion and colorization options
Dark mode support
Animated transitions
Audio playback for accessibility
Multilingual support
Customizable themes

Installation

You can install Captscii using npm or bun:

npm install captscii

bun add captscii

Usage Example

import { Captscii, CaptsciiProvider, useCaptscii } from 'captscii';

function MyForm() {
  const { isVerified, setIsVerified } = useCaptscii();

  return (
    <form>
      <Captscii
        diffuse={false}
        colorize={false}
        useEmoji={false}
        audioEnabled={false}
        animate={true}
        darkMode={false}
        onComplete={() => setIsVerified(true)}
        onFail={() => setIsVerified(false)}
      />
      {isVerified ? (
        <button type="submit">Submit Form</button>
      ) : (
        <p>Please complete the CAPTCHA to submit the form</p>
      )}
    </form>
  );
}

function App() {
  return (
    <CaptsciiProvider>
      <MyForm />
    </CaptsciiProvider>
  );
}

Documentation

`<Captscii />` Component

Props

onComplete?: (generationResult: string) => void - Callback when CAPTCHA is completed successfully.
onFail?: () => void - Callback when CAPTCHA verification fails.
onGenerate?: (word: string) => void - Callback when a new CAPTCHA is generated.
diffuse?: boolean - Enable character diffusion.
colorize?: boolean - Enable colorization of characters.
bgClassName?: string - Custom background class.
maxChars?: number - Maximum number of characters in CAPTCHA.
useEmoji?: boolean - Use emoji instead of ASCII characters.
darkMode?: boolean - Enable dark mode.
animate?: boolean - Enable animations.
language?: "en" | "es" - Language for labels.
audioEnabled?: boolean - Enable audio playback.

`<CaptsciiProvider />`

CaptsciiProvider is a context provider for managing CAPTCHA verification state.

Usage

import { CaptsciiProvider } from 'captscii';

function App() {
  return (
    <CaptsciiProvider>
      {/* Your components here */}
    </CaptsciiProvider>
  );
}