react-client-captcha

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

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