react-client-captcha

!Codecov


A light JS-based captcha generator.

- Custom characters.
- Retry functionality.
- Easily customizable via props.

Documentation

Installation

``
npm install react-client-captcha --save
or
yarn add react-client-captcha
`

Usage

![Edit react-client-captcha](https://codesandbox.io/s/stoic-noyce-fnkkq)

`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 console.log(code)} />;
}
}

ReactDOM.render(, document.getElementById("app"));
`

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