[](https://www.npmjs.com/package/react-client-captcha)  [
!Codecov


A light JS-based captcha generator.
- Custom characters.
- Retry functionality.
- Easily customizable via props.
```
npm install react-client-captcha --save
or
yarn add react-client-captcha

`javascript
import React from "react";
import ReactDOM from "react-dom";
import ClientCaptcha from "react-client-captcha";
export default class App extends React.Component {
render() {
return
}
}
ReactDOM.render(
`
| Name | Description | Type | Default |
| -------------------- | ----------------------------------------------------- | -------- | -------------------------------------------------------------------- |
| width | width of captcha image. | number | 100 |number
| height | height of captcha image. | | 40 |number
| fontSize | fontSize of captcha characters. | | 22 |string
| fontFamily | fontFamily of captcha characters. | | "Arial, Tahoma" |string
| fontColor | fontColor of captcha characters. | | "#000" |string
| chars | characters that captcha should be made with. | | "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789" |number
| charsCount | count of characters that captcha should be made with. | | 4 |func
| captchaCode | function that returns current shown captcha code. | | |string
| backgroundColor | backgroundColor of captcha image. | | "#F2F2F2" |bool
| retry | whether captcha has retry functionality | | true |string
| retryIcon | the icon of retry button | | "https://cdn.jsdelivr.net/npm/react-client-captcha/dist/retry.svg" |number
| retryIconSize | size of retry button icon | | 24 |string
| retryButtonClassName | className of retry button | | cssClasses.retryButton |string
| retryImgClassName | className of retry img | | "" |string
| containerClassName | className of captcha and retry button container div | | cssClasses.captchaContainer |string
| captchaClassName | className of captcha image | | "" |
Clone the project and run yarn test`
MIT © Majid Amiri