@jds-jnj/react-captcha NPM

Jds React Captcha

Simplest captcha component.

JDS react captcha is a user-friendly react captcha component.

Features

Simple and easy to use.

Image

captchaExample

Installation

JDS React Captcha requires ReactJS v17+ to run.

Install the dependencies and devDependencies and start the server.

npm i @jds-jnj/react-captcha

Usage

You can use the hook using:

import React, { useRef, useState } from 'react'
import { Captcha } from "@jds-jnj/react-captcha";

const JDSCaptcha = () => {
    const captchaRef = useRef<Captcha>(null);
    const [captchaValidated, setCaptchaValidated] = useState(false);

    const redraw = () => {
        captchaRef.current?.redraw();
    }
    
    return (
        <Captcha ref={captchaRef} length={6} validate={setCaptchaValidated} width />
    );
}

Props

JDS React Captcha has 3 props:

length - It signifies the captcha length. The captcha has the minimum length of 2 and a maximum length of 8. (Defaults to 4).
validate - It takes a function that recieves the validation status parameter. It is used to set the captcha status in a variable.
width - It signifies the captcha width. (Defaults to 250).

Functions

JDS React Captcha has 2 functions and can be used with the help of captcha reference:

redraw - It redraws the canvas with a new captcha without resetting the input.
reset - It resets the canvas with a new captcha adn resets the input field as well.