react-captchaa

A simple lightweight react component for generating captchas.

Install ✨

npm install --save react-captchaa

Usage 🎁

import React, { Component } from 'react'
import ReactCaptchaa from 'react-captchaa'
import 'react-captchaa/dist/index.css'

class Example extends Component {
  render() {
    return ( 
      <ReactCaptchaa
      captchaText= {(captchaText) => {
        console.log(captchaText)
        // captcha text ${captcha}
      }}
      captchaLength= {6}
      captchaButtonClick= {(e)=> {console.log(e)}}
      onCanvasClick= {(e)=> {console.log(e)}}
      height= {150}
      width= {280}
      iconName= {'FiRefreshCw'}
      iconColor= {'#fff'}
      fontSize= {'4em'}
      iconSize= {'1em'}
      containerClassName= {'react-captcha'}
      iconWrapperClassName= {'react-captcha-icon-wrapper'}
      canvasClassName= {'react-captcha-canvas'}
      iconClassName= {'react-captcha-icon'}
      charactersInclude= { "0123456789abcdefghijklmnopqrs
      tuvwxzABCDEFGHIJKLMNOPQRSTUVWXYZ!#$%^&" }
       />
       
       )
  }
}

Props 🕶

| Property | Type | Required | Default |Description | |:--------------------:|:------:|:--------:|:-------------------------------------------------------------------:|--------------------------------------------------------------------------------------------------| | captchaText | Func | true | - | callback function for returning the captcha text | | captchaLength | Number | true | 6 | length of captcha | | captchaButtonClick | Func | false | - | callback function for captcha button click | | onCanvasClick | Func | false | - | callback function for canvas click | | height | Number | false | 50 | height of captcha container in px | | width | Number | false | 100 | width of captcha container in px | | iconName | String | false | FiRefreshCw | Icon Name ( Use only react-icons library icons) url https://react-icons.github.io/react-icons/ | | iconColor | String | false | #fff | color of button icon | | iconSize | String | false | 1em | size of icon | | fontSize | String | false | 4em | size of font inside of captcha container | | containerClassName | String | false | react-captcha | className for whole captcha container | | iconWrapperClassName | String | false | react-captcha-icon-wrapper | className for button | | canvasClassName | String | false | react-captcha-canvas | className for captcha canvas element | | iconClassName | String | false | react-captcha-icon | className for icon | | charactersInclude | String | false | 0123456789abcdefghijklmnopqrstuvwxzABCDEFGHIJKLMNOPQRSTUVWXYZ!#$%^& | string from which captcha will generate |

License

MIT © alii13