<picture> </picture>

React Google reCAPTCHA

Google reCAPTCHA is a powerful library that provides easy integration of Google reCAPTCHA into your React applications. Built with TypeScript-first approach, SSR compatibility, and tree-shaking optimization - everything you need to protect your forms and applications from spam and abuse.

Supported reCAPTCHA Versions

• V3 - Invisible protection that returns a risk score (0.0-1.0) for each request
• V2 Invisible - Background analysis without user interaction
• V2 Checkbox - Interactive "I'm not a robot" checkbox with optional challenges
• Enterprise mode - support enterprise

Documentation

Visit https://siberiacancode.github.io/google-recaptcha/docs/react to view the full documentation.

Getting Started

npm install @google-recaptcha/react

import React from "react";
import ReactDOM from "react-dom/client";
import { GoogleReCaptchaProvider } from "@google-recaptcha/react";

import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <GoogleReCaptchaProvider type="v3" siteKey="your_site_key">
      <App />
    </GoogleReCaptchaProvider>
  </React.StrictMode>
);

Create a component to use reCAPTCHA:

import type { FormEvent } from 'react';
import { useGoogleReCaptcha } from '@google-recaptcha/react';

export const Form = () => {
  const googleReCaptcha = useGoogleReCaptcha();

  const onSubmit = async (event: FormEvent) => {
    event.preventDefault();

    const token = await googleReCaptcha.executeV3('action');
    ...
  };

  return (
    <form onSubmit={onSubmit}>
      ...
      <button type="submit">Submit</button>
    </form>
  );
}