react-client-captcha
A light JS-based captcha generator.
- Custom characters.
- Retry functionality.
- Easily customizable via props.
Installation
npm install react-client-captcha --save
or
yarn add react-client-captcha
Usage
;;; Component { return <ClientCaptcha captchaCode= console />; } ReactDOM;
Props
Name | Description | Type | Default |
---|---|---|---|
width | width of captcha image. | number |
100 |
height | height of captcha image. | number |
40 |
fontSize | fontSize of captcha characters. | number |
22 |
fontFamily | fontFamily of captcha characters. | string |
"Arial, Tahoma" |
fontColor | fontColor of captcha characters. | string |
"#000" |
chars | characters that captcha should be made with. | string |
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789" |
charsCount | count of characters that captcha should be made with. | number |
4 |
captchaCode | function that returns current shown captcha code. | func |
|
backgroundColor | backgroundColor of captcha image. | string |
"#F2F2F2" |
retry | whether captcha has retry functionality | bool |
true |
retryIcon | the icon of retry button | string |
"https://cdn.jsdelivr.net/npm/react-client-captcha/dist/retry.svg" |
retryIconSize | size of retry button icon | number |
24 |
retryButtonClassName | className of retry button | string |
cssClasses.retryButton |
retryImgClassName | className of retry img | string |
"" |
containerClassName | className of captcha and retry button container div | string |
cssClasses.captchaContainer |
captchaClassName | className of captcha image | string |
"" |
Tests
Clone the project and run yarn test
License
MIT © Majid Amiri