How to Implement React Simple Captcha

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>);
};

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'));

Options

NAME	DESCRIPTION
<LoadCanvasTemplate/>	Load the captcha with 'Reload Captcha' functionality. Place it between your render code, for example < LoadCanvasTemplate />
<LoadCanvasTemplateNoReload/>	Load the captcha without 'Reload Captcha' functionality. Place it between your render code, for example <LoadCanvasTemplateNoReload />
loadCaptchaEnginge(Number_Of_Captcha_Charcters);	Simply paste it in componentDidMount(). Enter number of characters you want to display in captcha.
validateCaptcha(User_Submitted_Value)	true will be return if user submitted value matches with captcha otherwise false. Reload captcha as well if user submitted value is false
validateCaptcha(User_Submitted_Value, false)	true will be return if user submitted value matches with captcha otherwise false. Not Reload captcha if user submitted value is false

Optional Changes
Following changes are Optional

OPTIONS	CHANGES
<LoadCanvasTemplate reloadText="Reload My Captcha"/>	Change the "Reload Captcha" with your own custom text
<LoadCanvasTemplate reloadColor="red"/>	Change the blue color of "Reload Captcha"
<LoadCanvasTemplate reloadText="Reload My Captcha" reloadColor="red"/>	Change the "Reload Captcha" text and it's blue color
loadCaptchaEnginge(Number_Of_Captcha_Charcters, Background_Color);	Change the background color from black to your custom color. Example Syntax to change the background color to red use: loadCaptchaEnginge(6,'red');
loadCaptchaEnginge(Number_Of_Captcha_Charcters, Background_Color, Font_Color);	Change the both background and font color. Example Syntax to change the background color to white and font color to black use: loadCaptchaEnginge(6,'white','black');
loadCaptchaEnginge(Number_Of_Captcha_Charcters, Background_Color, Font_Color, Upper_Characters_Only);	If you want only upper characters and numbers use loadCaptchaEnginge(6,'','','upper');
loadCaptchaEnginge(Number_Of_Captcha_Charcters, Background_Color, Font_Color, Lower_Characters_Only);	If you want only lower characters and numbers use loadCaptchaEnginge(6,'','','lower');
loadCaptchaEnginge(Number_Of_Captcha_Charcters, Background_Color, Font_Color, Numbers);	If you want only lower characters and numbers use loadCaptchaEnginge(6,'','','numbers');
loadCaptchaEnginge(Number_Of_Captcha_Charcters, Background_Color, Font_Color, Special_Characters);	If you want only special characters use loadCaptchaEnginge(6,'','','special_char');

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

Your Shopping Cart is Empty

How to Implement React Simple Captcha