react-client-captcha

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