Blog

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

Demo
Demo can be seen here.

Usage Guide
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';
Step 2:
Place <LoadCanvasTemplate /> or < LoadCanvasTemplateNoReload /> (in case you do not want 'Reload Captcha Reload' functionality) in your render code
render(){
return (<div>
<LoadCanvasTemplate />
</div>);
};
OR
render() {
return (<div>
<LoadCanvasTemplateNoReload/>
</div>);
};
Step 3:
Paste loadCaptchaEnginge(7) (You can change 7 to number of captcha charcters you want) in componentDidMount:
componentDidMount(){
loadCaptchaEnginge(7);
};
Step 4:
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');
}
};
OR
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 in index.js
import MyCaptchaClass from './captcha_test';
Now replace ReactDOM.render with
ReactDOM.render(<MyCaptchaClass />, document.getElementById('root'));


License
react-simple-captcha is licensed under the MIT license.