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

| Property | README | CaptchaProvider | Captcha | Default Value | | ---------- | ------------------------------------------------------- | --------------- | ------- | ------------- | | length | character count of code | ✓ | - | 5 | | format | charset to be used (see details below) | ✓ | - | a1 | | width | canvas width (in px) | ✓ | ✓ | 150 | | height | canvas height (in px) | ✓ | ✓ | 50 | | bgcolor | bgcolor of canvas (see details below) | ✓ | ✓ | #eee | | title | text displayed on mouse over (click to refresh) | ✓ | ✓ | Refresh code | | colors | color(s) of text, lines and circles (see details below) | ✓ | ✓ | 8 | | fonts | used font(s) (see details below) | ✓ | ✓ | 8 | | resize | vary font size of chars (boolean) | ✓ | ✓ | true | | rotate | rotate characters (boolean) | ✓ | ✓ | true | | vertical | move characters vertically (boolean) | ✓ | ✓ | true | | horizontal | move characters horizontally (boolean) | ✓ | ✓ | true | | shadow | draw shadow for characters (boolean) | ✓ | ✓ | true | | lines | number of lines in the background (integer) | ✓ | ✓ | 5 | | circles | number of circles in the background (integer) | ✓ | ✓ | 5 |