React Google Recaptcha V3

Install

npm install react-google-recaptcha-v3

Usage

Provide Recaptcha Key

To use

react-google-recaptcha-v3

Enterprise

When you enable to use the enterprise version, you must create new keys. These keys will replace any Site Keys you created in reCAPTCHA. Check the migration guide.

To work properly, you must select the Integration type to be

Scoring

The complete documentation to the enterprise version you can see here.

Components

GoogleReCaptchaProvider

react-google-recaptcha-v3

GoogleReCaptchaProvider

GoogleReCaptchaProvider

You can customize the injected

script

scriptProps

async

defer

nonce

appendTo

scriptProps

It also provides an optional prop

language

The provider also provide the prop

useRecaptchaNet

recaptcha.net

import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';

ReactDom.render(
  
    
  ,
  document.getElementById('app')
);

There are three ways to trigger the recaptcha validation: using the

GoogleReCaptcha

withGoogleReCaptcha

useGoogleReCaptcha

GoogleReCaptcha

GoogleRecaptcha

onVerify

import {
  GoogleReCaptchaProvider,
  GoogleReCaptcha
} from 'react-google-recaptcha-v3';

ReactDom.render(
  
    
  ,
  document.getElementById('app')
);

// IMPORTANT NOTES: The GoogleReCaptcha component is a wrapper around useGoogleRecaptcha hook and use useEffect to run the verification.
// It's important that you understand how React hooks work to use it properly.
// Avoid using inline function for the onVerify props as it can possibly cause the verify function to run continously.
// To avoid that problem, you can use a memoized function provided by React.useCallback or a class method
// The code below is an example that inline function can result in an infinite loop and the verify function runs continously:

const MyComponent: FC = () => {
  const [token, setToken] = useState();
  return (
    

       {
          setToken(token);
        }}
      />
    


  );
};

withGoogleReCaptcha

GoogleRecaptcha

googleReCaptchaProps

The object contains the

executeRecaptcha

import {
  GoogleReCaptchaProvider,
  withGoogleReCaptcha
} from 'react-google-recaptcha-v3';

class ReCaptchaComponent extends React.Component {
  async componentDidMount() {
    const token = await this.props.googleReCaptchaProps.executeRecaptcha('homepage');
  }
  render() {
    ...
  }
}
const YourReCaptchaComponent = withGoogleReCaptcha(ReCaptchaComponent);
ReactDom.render(
  
    
  ,
  document.getElementById('app')
);

React Hook: useGoogleReCaptcha (recommended approach)

If you prefer a React Hook approach over the old good Higher Order Component, you can choose to use the custom hook

useGoogleReCaptcha

withGoogleReCaptcha

It's very simple to use the hook:

import {
  GoogleReCaptchaProvider,
  useGoogleReCaptcha
} from 'react-google-recaptcha-v3';

const YourReCaptchaComponent  = () => {
  const { executeRecaptcha } = useGoogleReCaptcha();
  const token = executeRecaptcha("login_page");
  return (...)
}
ReactDom.render(
  
    
  ,
  document.getElementById('app')
);

Example

An example of how to use these two hooks can found inside the

example

RECAPTCHA_KEY=[YOUR_RECAPTCHA_KEY]