use-offline-captcha

use-offline-captcha

This is React captcha hook for offline application.

This hook does not communicate with the server. Only generate and validate code through only Client. If security is critical, DO NOT USE THIS LIBRARY.

Install

npm install --save use-offline-captcha

Preview

Demo

Usage

import { useEffect, useState, useRef } from 'react'
import useCaptcha from 'use-offline-captcha'

export default function App() {
    const captchaRef = useRef()
    const [value, setValue] = useState()
    const userOpt = {
        type: 'mixed', // "mixed"(default) | "numeric" | "alpha" 
        length: 5, // 4 to 8 number. default is 5
        sensitive: false, // Case sensitivity. default is false
        width: 200, // Canvas width. default is 200
        height: 50, // Canvas height. default is 50
        fontColor: '#000',
        background: 'rgba(255, 255, 255, .2)'
    }
    const { gen, validate } = useCaptcha(captchaRef, userOpt)

    useEffect(() => {
      if (gen) gen()
    }, [gen])

    const handleValidate = () => {
        const isValid = validate(value)
    }

    const handleRefresh = () => gen()

    return (
        <>
            <div ref={captchaRef} />
            <input onChange={(e) => setValue(e.target.value)} value={value} />
            <button onClick={handleValidate}>Validate</button>
            <button onClick={handleRefresh}>Refresh</button>
        </>
  );
}

Options

Key	Description	Value
*type	'numeric' only comes with numbers and 'alpha' only with alphabets. 'mixed' comes in a mixed form, but it cannot be guaranteed that only mixed forms come out. default is 'mixed'	'mixed', 'numeric', 'alpha'
length	Set maximum length of captcha. default is 5	4 - 8
sensitive	Set case sensitivity. default is false	true or false
width	Set captcha canvas width. default is 200
height	Set captcha canvas height. default is 50
fontColor	Set captcha canvas font color. default is #000
background	Set captcha canvas background color. default is rgba(255, 255, 255, .2)

License

MIT © tofutree23

This hook is created using create-react-hook.