1.0.3 • Published 5 years ago
react-client-captcha v1.0.3
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
import React from "react";
import ReactDOM from "react-dom";
import ClientCaptcha from "react-client-captcha";
export default class App extends React.Component {
render() {
return <ClientCaptcha captchaCode={code => console.log(code)} />;
}
}
ReactDOM.render(<App />, 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