---

React component for Google reCAPTCHA v2.

🚀 Installation

npm install --save @steamer-academy/react-google-recaptcha

📖 Usage

Start by signing up for an API key pair. Use the client key with the <ReCAPTCHA /> component as shown:

Basic Example

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

Component Props

Name	Type	Description
asyncScriptOnLoad	func	Optional. Callback when the script has loaded.
badge	enum	Optional. Badge position: bottomright, bottomleft, or inline.
hl	string	Optional. Language code (e.g., en, fr). Details.
isolated	bool	Optional. Enable isolated mode. Default: false.
onChange	func	Triggered when the user completes the captcha.
onErrored	func	Optional. Callback for error events.
onExpired	func	Optional. Triggered when the challenge expires.
sitekey	string	Required. API client key.
size	enum	Optional. Size of the captcha: compact, normal, or invisible.
stoken	string	Optional. Secure token for enhanced security.
tabindex	number	Optional. Tabindex of the element. Default: 0.
type	enum	Optional. Challenge type: image or audio. Default: image.
theme	enum	Optional. Widget theme: light or dark. Default: light. Example.

Advanced Features

Invisible reCAPTCHA

To use an invisible reCAPTCHA, invoke the challenge programmatically using execute or executeAsync.

import ReCAPTCHA from "react-google-recaptcha";

const recaptchaRef = React.createRef();

function handleSubmit() {
  recaptchaRef.current.execute();
}

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

Asynchronous Execution

const recaptchaRef = React.useRef();

const handleSubmit = async () => {
  const token = await recaptchaRef.current.executeAsync();
  console.log("Received token:", token);
};

return (
  <form onSubmit={handleSubmit}>
    <ReCAPTCHA
      ref={recaptchaRef}
      size="invisible"
      sitekey="Your client site key"
    />
  </form>
);

CSP Nonce Support

Add a nonce for strict Content Security Policy (CSP) compliance.

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

---

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.