React CAPTCHA Component

A customizable CAPTCHA component for React, allowing various styles and configurations to protect forms from bots.

Features

• Customizable dimensions and font sizes
• Background and text colors
• Noise and lines for added security
• Distortion effects
• Individual character styles
• Regeneration on demand

Installation

To install the package via npm:

npm install navid-react-captcha-generator

Or with yarn:

yarn add navid-react-captcha-generator

Usage

Here’s a basic example of how to use the Captcha component:

import { useState } from "react";
import { Captcha } from "navid-react-captcha-generator";

function App() {
  const [captchaValue, setCaptchaValue] = useState("");
  const [regenerate, setRegenerate] = useState(false);

  const handleCaptchaChange = (value: string) => {
    setCaptchaValue(value);
  };

  const regenerateCaptcha = () => {
    setRegenerate((prev) => !prev);
  };

  return (
    <div>
      <Captcha
        onChange={handleCaptchaChange}
        regenerate={regenerate}
        width={200}
        height={50}
        length={5}
        fontSize={24}
        bgColor="#fff"
        textColor="#000"
        noise={true}
        lines={true}
        distortion={true}
      />
      <p>Captcha Value: {captchaValue}</p>
      <button onClick={regenerateCaptcha}>Regenerate Captcha</button>
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | | ------------------ | ------------------------------------------------------ | ----------- | ------------------------------------------------------------------------------------------------- | | width | number | 200 | Width of the CAPTCHA canvas. | | height | number | 50 | Height of the CAPTCHA canvas. | | length | number | 6 | Number of characters in the CAPTCHA text. | | fontSize | number | 30 | Font size of the CAPTCHA text. | | bgColor | string | #ffffff | Background color of the CAPTCHA canvas. | | textColor | string \| string[] | #000000 | Color of the CAPTCHA text; can be a single color or an array of colors for individual characters. | | noise | boolean | true | Whether to add noise to the CAPTCHA. | | noiseColor | string | #000000 | Color of the noise. | | noiseDensity | number | 0.05 | Density of the noise; control how much noise is added. | | lines | boolean | true | Whether to add random lines to the CAPTCHA. | | lineColor | string | #000000 | Color of the lines. | | lineWidth | number | 1 | Width of the lines. | | distortion | boolean | true | Whether to apply distortion effects to the CAPTCHA. | | distortionAmount | number | 4 | Amount of distortion applied. | | onChange | (captcha: string) => void | undefined | Callback function that is called when the CAPTCHA value changes. | | regenerate | boolean | false | triggers CAPTCHA regeneration by changing false and true. | | charStyles | { [key: number]: { size?: number; color?: string } } | {} | Individual styles for each character, including size and color. |

Examples

Example 1: Basic Usage

<Captcha
  width={200}
  height={50}
  length={5}
  fontSize={24}
  bgColor="#fff"
  textColor="#000"
  noise={true}
  lines={true}
  distortion={true}
/>

Example 2: Custom Colors and Noise

<Captcha
  width={300}
  height={60}
  length={8}
  fontSize={28}
  bgColor="#000000"
  textColor={["#ff0000", "#00ff00", "#0000ff"]}
  noiseColor="#aaaaaa"
  noiseDensity={0.1}
  lines={true}
  lineColor="#cccccc"
  lineWidth={2}
  distortion={true}
  distortionAmount={6}
/>

Example 3: Individual Character Styles

<Captcha
  width={250}
  height={70}
  length={6}
  fontSize={36}
  bgColor="#fafafa"
  textColor="#000"
  noise={true}
  lines={false}
  distortion={false}
  charStyles={{
    0: { size: 40, color: "#ff0000" },
    1: { size: 30, color: "#00ff00" },
    2: { size: 35, color: "#0000ff" },
    3: { size: 32, color: "#ff00ff" },
    4: { size: 38, color: "#00ffff" },
    5: { size: 30, color: "#ffff00" },
  }}
/>

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Navid Mousavizadeh