React

The React package provides a comprehensive solution for integrating Google reCAPTCHA into React applications. Built specifically for React, it offers hooks, components, and providers that seamlessly integrate with your React workflow while supporting all reCAPTCHA versions including v3, v2-invisible, and v2-checkbox.

Installation

Install the React package using your preferred package manager:

npm install @google-recaptcha/react

pnpm add @google-recaptcha/react

yarn add @google-recaptcha/react

bun add @google-recaptcha/react

Provider Setup

All reCAPTCHA functionality requires wrapping your application with the GoogleReCaptchaProvider. This provider manages the reCAPTCHA script loading and provides context to child components.

import { GoogleReCaptchaProvider } from '@google-recaptcha/react';

export const App = () => (
  <GoogleReCaptchaProvider type='v3 | v2-checkbox | v2-invisible' siteKey='your_site_key'>
    ...
  </GoogleReCaptchaProvider>
);

V3

Google ReCaptcha v3 returns a score for each request without user friction. The score is based on interactions with your site and enables you to take an appropriate action for your site.

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

const App = () => {
  const googleReCaptcha = useGoogleReCaptcha();

  const onVerify = async () => {
    if (!googleReCaptcha.executeV3) {
      console.log('Execute recaptcha not available');
      return;
    }

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

  return <button onClick={onVerify}>verify</button>;
};

V2 invisible

Google ReCaptcha v2 invisible does not require users to solve any puzzles or enter any codes. Instead, it runs in the background and analyzes user behavior on the web page to determine if they are genuine users or potential bots.

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

const App = () => {
  const googleReCaptcha = useGoogleReCaptcha();

  const onVerify = async () => {
    if (!googleReCaptcha.executeV2Invisible) {
      console.log('Execute recaptcha not available');
      return;
    }

    const token = await googleReCaptcha.executeV2Invisible();
    ...
  };

  return <button onClick={onVerify}>verify</button>;
};

V2 checkbox

When a user interacts with the Google ReCaptcha v2 checkbox, advanced algorithms analyze their behavior to distinguish between humans and bots. If the system suspects suspicious activity, additional challenges may be presented, such as image selections or puzzle-solving tasks.

import { GoogleReCaptchaCheckbox } from '@google-recaptcha/react';

const App = () => <GoogleReCaptchaCheckbox onChange={(token) => console.log(token)} />;

Enterprise Mode

Google reCAPTCHA Enterprise provides enhanced security features, advanced analytics, and better customization options for businesses. It offers improved bot detection, detailed risk analysis, and enterprise-grade support.

<GoogleReCaptchaProvider type='v3' siteKey='your_enterprise_site_key' isEnterprise>
  <App />
</GoogleReCaptchaProvider>

Enterprise mode supports some actions for better risk assessment and provides detailed analytics on user interactions.

const googleReCaptcha = useGoogleReCaptcha();

const onClick = async () => {
  const token = await googleReCaptcha.executeV3('action');
  ...
};