use-offline-captcha v0.2.0

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

License

MIT © tofutree23

This hook is created using create-react-hook.