react-client-captcha-r18

This repo is forked from https://github.com/majid-amiri/react-client-captcha in order to update peerDependencies to support react 18.

!Codecov


A light JS-based captcha generator.

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

Documentation

Installation

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

Usage


`javascript
import React from 'react'
import ReactDOM from 'react-dom'
import ClientCaptcha from 'react-client-captcha-r18'

export default class App extends React.Component {
render() {
return console.log(code)} />
}
}

ReactDOM.render(, document.getElementById('app'))
`

Props

$3

|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.refreshButton|
|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