Package Exports

@jds-jnj/react-captcha
@jds-jnj/react-captcha/dist/index.js
@jds-jnj/react-captcha/dist/react-captcha.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@jds-jnj/react-captcha) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

License

MIT

Free Software, Hell Yeah!