React Simple Captcha designed by Scriptse is a very simple to use and highly customizable captcha for React JS.
Install
$ npm install react-simple-captcha
react-simple-captcha npm can be used by following these four steps:
Step 1:
Import all functions from react-simple-captcha
import {loadCaptchaEnginge, LoadCanvasTemplate, LoadCanvasTemplateNoReload, validateCaptcha} from 'react-simple-captcha';
Place <LoadCanvasTemplate /> or < LoadCanvasTemplateNoReload /> (in case you do not want 'Reload Captcha Reload' functionality) in your render code
render(){
return (<div>
<LoadCanvasTemplate />
</div>);
};
render() {
return (<div>
<LoadCanvasTemplateNoReload/>
</div>);
};
Paste loadCaptchaEnginge(7) (You can change 7 to number of captcha charcters you want) in componentDidMount:
componentDidMount(){
loadCaptchaEnginge(7);
};
Validate captcha by using validateCaptcha(userCaptchaValue)
submitMyForm = () => {
<!-- let's assume there is an HTML input text box with id 'user_captcha_input' to get user input -->
let userCaptchaValue = document.getElementById('user_captcha_input').value;
if (validateCaptcha(userCaptchaValue)==true) {
alert('Captcha Matched');
}
else {
alert('Captcha Does Not Match');
}
};
Set second parameter to false If you don't want captcha to be reloaded when user enter the wrong value validateCaptcha(userCaptchaValue, false)
submitMyForm = () => {
<!-- let's assume there is an HTML input text box with id 'user_captcha_input' to get user input -->
let userCaptchaValue = document.getElementById('user_captcha_input').value;
if (validateCaptcha(userCaptchaValue, false)==true) {
alert('Captcha Matched');
}
else {
alert('Captcha Does Not Match');
}
};
Example
Let's create a class name MyCaptchaClass with react simple captcha functionality:
import React, { Component } from 'react';
import { loadCaptchaEnginge, LoadCanvasTemplate, LoadCanvasTemplateNoReload, validateCaptcha } from 'react-simple-captcha';
class MyCaptchaClass extends Component {
componentDidMount(){
loadCaptchaEnginge(6);
};
submitMyForm = () => {
let user_captcha = document.getElementById('user_captcha_input').value;
if (validateCaptcha(user_captcha)===true) {
alert('Captcha Matched');
loadCaptchaEnginge(6);
document.getElementById('user_captcha_input').value = "";
}
else {
alert('Captcha Does Not Match');
document.getElementById('user_captcha_input').value = "";}};
render() {
return (<div>
<div className="container">
<div className="form-group">
<div className="col mt-3">
<LoadCanvasTemplate />
</div>
<div className="col mt-3">
<div><input placeholder="Enter Captcha Value" id="user_captcha_input" name="user_captcha_input" type="text"></input></div>
</div>
<div className="col mt-3">
<div><button class="btn btn-primary" onClick={() => this.submitMyForm()}>Submit</button></div>
</div>
</div>
</div>
</div>);};
}
export default MyCaptchaClass;
import MyCaptchaClass from './captcha_test';
ReactDOM.render(<MyCaptchaClass />, document.getElementById('root'));
License
react-simple-captcha is licensed under the MIT license.