react-awesome-captcha

react-awesome-captcha is a simple and customizable React CAPTCHA component designed to validate user inputs in a user-friendly manner. It generates random CAPTCHA strings and provides visual cues for input validity.

Features

• Generate CAPTCHA: Automatically generates a random CAPTCHA string.
• Easy Integration: Seamless integration into any React project.
• Customizable: Customize styles and behavior according to your application's needs.

Installation

You can install react-awesome-captcha using npm:

npm install react-awesome-captcha

Usage

Example: Using AwesomeCaptcha Component

Import the AwesomeCaptcha component and use it in your React application:

import React, { useState } from "react";
import { AwesomeCaptcha } from "react-awesome-captcha";

const App = () => {
  const [isCaptchaValid, setIsCaptchaValid] = useState(false);

  const handleCaptchaValidation = (isValid) => {
    setIsCaptchaValid(isValid);
  };

  return (
    <div>
      <h1>Simple CAPTCHA Component</h1>
      <AwesomeCaptcha onValidate={handleCaptchaValidation} />
      {isCaptchaValid ? <p>Captcha is valid!</p> : <p>Captcha is invalid!</p>}
    </div>
  );
};

export default App;

Props

• onValidate (function): A callback function that receives a boolean indicating whether the user input matches the CAPTCHA.

• className (tailwind style): Add tailwind css classes for styling

• vertical (boolean): Vertical Captcha Form

Example: Using captcha and generateCaptcha Utilities

You can also use the captcha and generateCaptcha utilities directly:

import React, { useState } from "react";
import { captcha, generateCaptcha } from "react-awesome-captcha";

const CaptchaComponent = () => {
  const [userInput, setUserInput] = useState("");
  const [isValid, setIsValid] = useState(false);

  const handleInputChange = (e) => {
    const value = e.target.value;
    setUserInput(value);
    setIsValid(value === captcha);
  };

  const handleGenerateCaptcha = () => {
    generateCaptcha();
    setUserInput("");
    setIsValid(false);
  };

  return (
    <div>
      <h1>Simple CAPTCHA Example</h1>
      <p>CAPTCHA: {captcha}</p>
      <input
        type="text"
        value={userInput}
        onChange={handleInputChange}
        placeholder="Enter CAPTCHA"
      />
      <button onClick={handleGenerateCaptcha}>Generate New CAPTCHA</button>
      {isValid ? <p>Valid CAPTCHA</p> : <p>Invalid CAPTCHA</p>}
    </div>
  );
};

export default CaptchaComponent;

Utilities

captcha

The captcha utility is a string variable that holds the current CAPTCHA value generated by the generateCaptcha function.

generateCaptcha()

The generateCaptcha function is used to generate a new random CAPTCHA string and update the captcha variable. It does not take any arguments and is typically called when initializing the CAPTCHA or when the user requests a new CAPTCHA.

Contributing

Contributions are welcome! If you have any improvements or new features to suggest, feel free to open an issue or submit a pull request. Please ensure that your contributions align with the code of conduct and are appropriately licensed.

License

This project is licensed under the MIT License. See the LICENSE file for more details.