Reusable react captcha component

It's a react component that you can use it to generate captcha very easy.

Demo: nabidam-react-captcha.netlify.app

Installation

npm install @nabidam/react-captcha

Usage

Simple usage

1. Import the component.

   import { Captcha } from "@nabidam/react-captcha"

2. Define your state. We are going to pass setter to the component.

   const [captcha, setCaptcha] = useState("");

3. Use the component.

   <Captcha setWord={setCaptcha}/>

4. When the parent component is rendered, setCaptcha will fire and the value assigned to captcha.

Reload when validation failed

You can reload the captcha whenever user submits the wrong value.

1. Use useRef to define a reference to the component.

   const captchaRef = useRef();
   .
   .
   .
   <Captcha setWord={setCaptcha} ref={captchaRef} />

2. Call method initializeCaptcha from the component whenever user submits wrong value.

   if(userInput !== captcha){
       // your code
       captchaRef.current.initializeCaptcha();
   }

Props

| name | type | default | description | | :----------------: | :----------: | :------------: | :---------------------------------------------------: | | setWord | function | - | callback to store captcha value. | | numberOfCharacters | number | 4 | number of characters to generate captcha | | persianChars | boolean | false | use persian letters to generate? | | reloadText | string | Reload Captcha | text of the reload button | | reloadEl | html element | - | you can pass reload element entirely to the component | | backgroundColor | color strong | #0c0c0c | color of the background | | fontColor | color string | #fff | color of the text |