react-google-recaptcha

Component wrapper for Google reCAPTCHA v2

Installation

npm install --save react-google-recaptcha

Usage

All you need to do is sign up for an API key pair. You will need the client key.

You can then use the reCAPTCHA. The default require imports a wrapped component that loads the reCAPTCHA script asynchronously.

import ReCAPTCHA from "react-google-recaptcha";

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

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

Rendering Props

Other properties can be used to customise the rendering.

Name	Type	Description
sitekey	string	The API client key
onChange	func	The function to be called when the user successfully completes the captcha
theme	enum	optional light or dark The theme of the widget (defaults: light). See example
type	enum	optional image or audio The type of initial captcha (defaults: image)
tabindex	number	optional The tabindex on the element (default: 0)
onExpired	func	optional callback when the challenge is expired and has to be redone by user. By default it will call the onChange with null to signify expired callback.
stoken	string	optional set the stoken parameter, which allows the captcha to be used from different domains, see reCAPTCHA secure-token
size	enum	optional compact, normal or invisible. This allows you to change the size or do an invisible captcha
badge	enum	optional bottomright, bottomleft or inline. Positions reCAPTCHA badge. Only for invisible reCAPTCHA

lang: In order to translate the reCaptcha widget, you should create a global variable configuring the desired language. If you don't provide it, reCaptcha will pick up the user's interface language.

useRecaptchaNet: If google.com is blocked, you can set useRecaptchaNet to true so that the component uses recaptcha.net instead.

removeOnMount: If you plan to change the lang dynamically, removeOnMount should probably be true. This will allow you to unmount the reCAPTCHA component and remount it with a new language.

window.recaptchaOptions = {
  lang: 'fr',
  useRecaptchaNet: true,
  removeOnMount: false,
};

Component API

The component instance also has some utility functions that can be called. These can be accessed via ref.

• getValue() returns the value of the captcha field
• getWidgetId() returns the recaptcha widget Id
• reset() forces reset. See the JavaScript API doc
• execute() programmatically invoke the challenge
  • need to call when using "invisible" reCAPTCHA - example below

Invisible reCAPTCHA

Invisible reCAPTCHA

Starting with 0.7.0, the component now supports invisible options. See the reCAPTCHA documentation to see how to configure it.

With the invisible option, you need to handle things a bit differently. You will need to call the execute method yourself.

import ReCAPTCHA from "react-google-recaptcha";

let captcha;

ReactDOM.render(
  <form onSubmit={() => { captcha.execute(); }}>
    <ReCAPTCHA
      ref={(el) => { captcha = el; }}
      size="invisible"
      sitekey="Your client site key"
    />
  </form>,
  document.body
);

Advanced usage

You can also use the barebone components doing the following. Using that component will oblige you to manage the grecaptcha dep and load the script by yourself.

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
);

Notes on Requirements

At least [email protected] is required due to forwardRef usage in react-async-script.

Notes

Pre 1.0.0 and React < 16.4.1 support details in 0.14.0.