s16-react-client-captcha
v1.0.0
Published
A light JS-based captcha generator for React.js
Downloads
3
Readme
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
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