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

ClientCaptcha

Name	Description	Type	Default
backgroundColor	backgroundColor of captcha image.	string	'#F2F2F2'
captchaClassName	className of captcha image	string	''
captchaCode	function that returns current shown captcha code.	func	() => {}
chars	characters that captcha should be made with.	string	'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
charsCount	count of characters that captcha should be made with.	number	4
containerClassName	className of captcha and retry button container div	string	styles.captchaContainer
font	the font property for canvas. if set, none of the fontFamily, fontSize and font Style would work.	string	null
fontColor	fontColor of captcha characters.	string	'#000'
fontFamily	fontFamily of captcha characters.	string	'Arial, Tahoma'
fontSize	fontSize of captcha characters.	number	22
fontStyle	fontStyle of captcha characters.	string	'normal'
height	height of captcha image.	number	40
refreshButton	whether there is a refresh button by default	bool	true
refreshButtonClassName	className of refresh button	string	styles.retryButton
refreshButtonIcon	the icon of refresh button	string	'https://cdn.jsdelivr.net/npm/react-client-captcha/dist/retry.svg'
refreshButtonIconClassName	className of refresh button icon	string	''
refreshButtonIconSize	size of refresh button icon	number	24
width	width of captcha image.	number	100

Tests

Clone the project and run yarn test

License

MIT © Majid Amiri