react-custom-captcha v0.1.2

react-custom-captcha

A simple but powerfully and highly customizable captcha code component without a single package dependency, except React itself.

Installation

Via npm:

$ npm install react-custom-captcha

via yarn:

$ yarn add react-custom-captcha

Usage

App.js: Add CaptchaProvider

...
import { CaptchaProvider } from "react-custom-captcha";
...
    return(
        ...
            <CaptchaProvider length={...} format={...} {...moreOptions} >
                ...
            </CaptchaProvider>
        ...
        );
...

MyComponent.js: Add Captcha and useCaptcha

...
import { Captcha, useCaptcha } from "react-custom-captcha";
import { useState, useCallback } from "react";
...

const { validate, refresh } = useCaptcha();
const [captcha, setCaptcha] = useState("");
...
const onSubmitHandler = useCallback(
    (event) => {
      const isValidCaptcha = validate(captcha);
      setCaptcha("");
      ...
      event.preventDefault();
    },
    [captcha, validate]
  );
...
  const onRefreshHandler = useCallback(() => {
    refresh();
  }, [refresh]);
...
    return(
        ...
            <Captcha bgColor={...} width={...} height={...} {...moreOptions}/>
            ...
             <button onClick={onRefreshHandler}>Refresh captcha</button>
            ...
            <input
                type="text"
                required={true}
                placeholder="enter captcha code"
                value={captcha}
                onChange={(event) => setCaptcha(event.target.value)}
            />
            ...
            <button onClick={onSubmitHandler}>Submit</button>
        ...
        );
...

Configuration Options