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.

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

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