How to implement custom captcha in React JS

ReactJs tutorial for beginners and professionals provides in-depth knowledge of ReactJs scripting language. Our ReactJs tutorial will help you to learn the ReactJs scripting language easily.

Learn about React Bootstrap

This ReactJs tutorial covers all the topics of ReactJs such as introduction, control statements, functions, array, string, file handling, form handling, regular expression, date and time, object-oriented programming in ReactJs, math, ReactJs MySQL, ReactJs with Ajax, ReactJs with jQuery and ReactJs with XML

Download Source Code:  Captcha in ReactJS

Using jquery and ReactJS we can captcha code. Captcha.js file

import 'bootstrap/dist/css/bootstrap.min.css';
import captchaImg from './captcha.jpg';
import studentIMG from './2.png';
import React, { useState, useEffect } from 'react';
function Captcha() {
  const [user, setUser] = useState({
  const characters ='abc123';
  function generateString(length) 
      let result = '';
      const charactersLength = characters.length;
      for ( let i = 0; i < length; i++ ) {
          result += characters.charAt(Math.floor(Math.random() * charactersLength));
     return result;
   const captcha = generateString(6) // Function called here and save in captcha variable
   let handleChange = (e) => {
     let name =;
     let value =;
     user[name] = value;
  const onSubmit = e => {
    var element =  document.getElementById("succesBTN");
    var inputData = document.getElementById("inputType"); = "wait";
     element.innerHTML  = "Checking...";
     inputData.disabled = true;
     element.disabled = true;
      var myFunctions = function(){
          if(captcha == user.username)
     = "green";
            element.innerHTML  = "Captcha Verified";
            element.disabled = true;
   = "not-allowed";
   = "none";
     = "red";
   = "not-allowed";
            element.innerHTML  = "Not Matched";
            element.disabled = true;
            //  element.disabled = true;
            var myFunction = function(){
       = "#007bff";
     = "pointer";
              element.innerHTML  = "Verify Captcha";
              element.disabled = false;
              inputData.disabled = false;
              inputData.value ='sssss';
   return (
    <div class="container">
      <h4 className="text-center mt-4 text-info"><b> Validate Captcha using REACT JS</b></h4>
      <div class="row mt-4">
          <div class="col-md-4">
          <div class="col-md-8">
            <h4 id="captcha" style={{ marginTop:"162px",marginLeft:"25px",position:"absolute"}}>{captcha}</h4>
            <div class="form-group row">
              <img src={studentIMG} className="mt-3 mb-3" height="90"/> <span class="font-weight-bold ml-3"  style={{ marginTop:"50px"}} >Mariah Benchos</span>
            <div class="form-group row">
              <img src={captchaImg} className="mt-3 mb-3" height="50"/> 
            <div class="form-group row">
              <input type="text" id="inputType" className="form-control"placeholder="Enter Captcha"
                name="username"  onChange={handleChange} autocomplete="off" style={{width:"20%"}}
              <button type="button" id="succesBTN" onClick={onSubmit} class="btn btn-primary ml-1">Verify Captcha</button>
export default Captcha;

This is App.js file

import './App.css';
import  Captcha from './Captcha.js';
function App() {
  return (
    <div className="App">
export default App;

See our More Tutorials on React

Photo Capture in React

Email Validation in ReactJS

OTP countdown timer in react

Material UI Table in React

Hide Navbar on Login Page in ReactJs

Leave a Reply

Your email address will not be published. Required fields are marked *