react-custom-captcha

0.1.2 • Public • Published

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

Package Sidebar

Install

npm i react-custom-captcha

Weekly Downloads

20

Version

0.1.2

License

none

Unpacked Size

32.1 kB

Total Files

12

Last publish

Collaborators

  • gf78