react-captcha-lite Documentation

Overview

The CaptchaBox component is a React functional component that renders a CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) box. It generates a random string based on specified criteria and displays it on an HTML5 canvas element. The component also provides a button to reload and generate a new CAPTCHA string. PropTypes

The CaptchaBox component accepts the following props:

• width (number): The width of the CAPTCHA canvas. Default is 200.
• height (number): The height of the CAPTCHA canvas. Default is 60.
• fontColor (string): The color of the CAPTCHA text. Default is "#000".
• boxBorder (string): The CSS border property for the CAPTCHA box. Default is "2px solid grey".
• boxBackground (string): The background color of the CAPTCHA box. Default is "#fff".
• textType (string): The type of characters used in the CAPTCHA text. Default is "MIXED". It can be one of: "UPPER_TEXT" "LOWER_TEXT" "UPPER_TEXT_NUM" "LOWER_TEXT_NUM" "NUM_ONLY" "MIXED"
• charLength (number): The length of the CAPTCHA text. Default is 6.
• reloadStyle (object): Inline styles for the reload button.
• containerStyle (object): Inline styles for the container div. Default is an object with flexbox properties.

Usage

import { CaptchaBox, validateCaptcha, reloadCaptcha } from "react-captcha-lite";

Example

import React from "react";
import { CaptchaBox, validateCaptcha } from "react-captcha-lite";

function App() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const userInput = e.target.elements.captchaInput.value;
    if (validateCaptcha(userInput)) {
      alert("CAPTCHA validation successful");
    } else {
      alert("CAPTCHA validation failed");
    }
  };

  return (
    <div>
      <CaptchaBox />
      <form onSubmit={handleSubmit}>
        <input type="text" name="captchaInput" required />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;