react-google-recaptcha

Install the package using npm to add the Google reCAPTCHA v2 component to your React project.

npm install --save react-google-recaptcha

When upgrading from version 1.0 to 2.0, the following changes to the component options must be applied:

1. Language Configuration: The options.lang property has been removed. To change the language of the reCAPTCHA widget, use the hl prop on the component instead.
2. Unmounting Behavior: The options.removeOnUnmount property has been removed. This property is no longer necessary for language changes as language is now handled via the hl prop.

// Instead of:
// <ReCAPTCHA options={{ lang: 'fr' }} />

// Use:
<ReCAPTCHA hl='fr' />

You can hide the reCAPTCHA badge using CSS, but Google requires you to include specific branding text in your user flow to remain compliant.

CSS to hide badge:

.grecaptcha-badge { visibility: hidden; }

Required branding text:

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

To support Content Security Policy (CSP) nonces, set the nonce property in window.recaptchaOptions using a value from your site's meta tags.

window.recaptchaOptions = {
  nonce: document.querySelector("meta[name='csp-nonce']").getAttribute('content'),
};

You can configure global properties by setting window.recaptchaOptions. This is useful for using reCAPTCHA via recaptcha.net if google.com is blocked, or for enabling Google Enterprise reCAPTCHA.

window.recaptchaOptions = {
  useRecaptchaNet: true,
  enterprise: true,
};

To use the default <ReCAPTCHA /> component, provide a sitekey (obtained from the Google reCAPTCHA admin console) and an onChange callback function. The component automatically loads the Google reCAPTCHA script asynchronously.

import ReCAPTCHA from "react-google-recaptcha";

function onChange(value) {
  console.log("Captcha value:", value);
}

ReactDOM.render(
  <ReCAPTCHA
    sitekey="Your client site key"
    onChange={onChange}
  />,
  document.body
);

You can access utility functions via a ref attached to the <ReCAPTCHA /> component instance:

- `getValue()`: returns the value of the captcha field
- `getWidgetId()`: returns the recaptcha widget Id
- `reset()`: forces reset
- `execute()`: programmatically invoke the challenge (required for `size="invisible"`)
- `executeAsync()`: programmatically invoke the challenge and return a promise that resolves to the token or errors.

If you want to manage the grecaptcha dependency and script loading yourself, you can use the barebone <ReCAPTCHA /> component by passing the grecaptcha object directly.

import { ReCAPTCHA } from "react-google-recaptcha";

const grecaptchaObject = window.grecaptcha; // You must provide access to the google grecaptcha object.

render(
  <ReCAPTCHA
    ref={(r) => this.recaptcha = r}
    sitekey="Your client site key"
    grecaptcha={grecaptchaObject}
  />,
  document.body
);

The ReCAPTCHA component is a named export. This is the core component used to render the Google reCAPTCHA widget in your React application.

import { ReCAPTCHA } from 'react-google-recaptcha';

The default export of this package is RecaptchaWrapper. Use this component to wrap your reCAPTCHA implementation, likely providing a higher-level abstraction or integration layer for the core ReCAPTCHA component.

import RecaptchaWrapper from 'react-google-recaptcha';