Skip to main content

React Google reCAPTCHA

A powerful React component wrapper for Google reCAPTCHA v2. Protect your applications from spam and abuse with an easy-to-use, fully customizable integration.

Quick Start

Get up and running with React Google reCAPTCHA in minutes

1

Install the package

Install react-google-recaptcha using your preferred package manager:
npm install react-google-recaptcha
2

Get your reCAPTCHA site key

Sign up for a Google reCAPTCHA API key. You’ll receive a site key and secret key. The site key is what you’ll use in your React application.
Make sure to select reCAPTCHA v2 when registering your site. This library is designed specifically for v2.
3

Add the component to your form

Import the ReCAPTCHA component and add it to your React form:
import ReCAPTCHA from "react-google-recaptcha";

function ContactForm() {
  const handleCaptchaChange = (value) => {
    console.log("Captcha value:", value);
    // Send this value to your backend for verification
  };

  return (
    <form>
      <input type="text" placeholder="Name" />
      <input type="email" placeholder="Email" />
      <ReCAPTCHA
        sitekey="YOUR_SITE_KEY"
        onChange={handleCaptchaChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}
The onChange callback receives the response token which you should send to your backend for verification using Google’s API.

Key Features

Everything you need for robust bot protection in your React applications

Easy Integration

Drop-in React component with automatic script loading and minimal configuration required.

Invisible reCAPTCHA

Support for invisible reCAPTCHA that doesn’t interrupt user experience.

Enterprise Support

Full compatibility with Google Enterprise reCAPTCHA for advanced security needs.

Promise-based API

Modern async/await support with executeAsync() for cleaner code.

Multiple Themes & Sizes

Customize appearance with light/dark themes and compact/normal/invisible sizes.

CSP Nonce Support

Content Security Policy compliant with nonce attribute support.

Explore the Documentation

Dive deeper into advanced usage patterns and API details

Basic Usage

Learn the fundamentals of using the ReCAPTCHA component

API Reference

Complete reference for all component props and methods

Advanced Usage

Manual script loading, recaptcha.net, and global options

Invisible reCAPTCHA

Implement seamless bot protection without user interaction

Enterprise

Configure Google Enterprise reCAPTCHA integration

Migration Guide

Upgrade from older versions with our migration guide

Ready to protect your application?

Get started with React Google reCAPTCHA today and add enterprise-grade bot protection to your forms in minutes.

Start Building →

Build docs developers (and LLMs) love