How To Setup Google ReCAPTCHA

Google ReCAPTCHA helps protect your website from spam and abuse. This documentation covers how to implement an invisible ReCAPTCHA in a your component.

To use the react-google-recaptcha library, you need to install it via npm. Run the following command in your project directory:

1
npm install --save react-google-recaptcha";

If you using typescript you need to install the following or else ignore

1
npm i --save-dev @types/react-google-recaptcha

Import the package into your component

1
import ReCAPTCHA from "react-google-recaptcha";

Create a reference for the ReCAPTCHA instance

1
const recaptchaRef = React.createRef();

If you use typescript then you need to reference the ReCAPTCHA as follows or else ignore the snippit code

1
const recaptchaRef = React.createRef<ReCAPTCHA>();

Below is the code snippet to integrate Google ReCAPTCHA into your form component. replace YOUR-SITE-KEY with your site key obtained from the google ReCAPTCHA admin console

1
<ReCAPTCHA
2
  ref={recaptchaRef}
3
  size="invisible"
4
  sitekey="YOUR-SITE-KEY"
5
/>