How To Use Recaptcha In React Js

In this article, we will learn how to use Recaptcha in react js.

reCAPTCHA is a free service from Google that protects websites against spam and abuse.

A Turing test intended to distinguish between humans and machines is known as a “CAPTCHA.”

It’s simple for people to figure out, but difficult for “bots” and other harmful software.

You may restrict automated software while allowing your welcome users to enter with ease by adding reCAPTCHA to a site.

For add Recaptcha in oversite. First, you have to install the npm package of Recaptcha you can see below,

npm i react-google-recaptcha

Whenever you have to use Recaptcha you have to need to site key. First, you have to create a site key for your site and use it

you can see below how to integrate google Recaptcha in react js.

import React from 'react'
import ReCAPTCHA from "react-google-recaptcha";

export default function Rechapta() {
  const recaptchaRef = React.useRef();
  return (
    <ReCAPTCHA
      ref={recaptchaRef}
      size="visible"
      // ex
      sitekey={"6LfW6wATAAAAAHLqO2pb8bDBahxlMxNdo9g947u9"}
    />
  )
}

Here, for the demo use have to use the local site key for it.

You can see below, how it is work.