React library for integrating Google ReCaptcha V3 to your App.
npm install react-google-recaptcha-v3
To use react-google-recaptcha-v3
, you need to create a recaptcha key for your domain, you can get one from here.
react-google-recaptcha-v3
provides a GoogleReCaptchaProvider
provider component that should be used to wrap around your components.
GoogleReCaptchaProvider
's responsibility is to load the necessary reCaptcha script and provide access to reCaptcha to the rest of your application.
It also provides an optional prop language
to support different languages that is supported by Google Recaptcha.
https://developers.google.com/recaptcha/docs/language
The provider also provide the prop useRecaptchaNet
to load script from recaptcha.net
:
https://developers.google.com/recaptcha/docs/faq#can-i-use-recaptcha-globally
import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
ReactDom.render(
<GoogleReCaptchaProvider
reCaptchaKey="[Your recaptcha key]"
language="[optional_language]"
useRecaptchaNet="[optional_boolean_value]"
>
<YourApp />
</GoogleReCaptchaProvider>,
document.getElementById('app')
);
There are three ways to trigger the recaptcha validation: using the GoogleReCaptcha
component, wrapping your component with the HOC withGoogleReCaptcha
, or using the custom hook useGoogleReCaptcha
.
GoogleRecaptcha
is a react component that can be used in your app to trigger the validation. It provides a prop onVerify
, which will be called once the verify is done successfully.
import {
GoogleReCaptchaProvider,
GoogleReCaptcha
} from 'react-google-recaptcha-v3';
ReactDom.render(
<GoogleReCaptchaProvider reCaptchaKey="[Your recaptcha key]">
<GoogleReCaptcha onVerify={token => console.log(token)} />
</GoogleReCaptchaProvider>,
document.getElementById('app')
);
GoogleRecaptcha
is a HOC (higher order component) that can be used to integrate reCaptcha validation with your component and trigger the validation programmatically. It inject the wrapped component with googleReCaptchaProps
object.
The object contains the executeRecaptcha
function that can be called to validate the user action.
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(
<GoogleReCaptchaProvider reCaptchaKey="[Your recaptcha key]">
<YourReCaptchaComponent />
</GoogleReCaptchaProvider>,
document.getElementById('app')
);
If you prefer a React Hook approach over the ol good Higher Order Component, you can choose to use the custom hook useGoogleReCaptcha
over the HOC 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(
<GoogleReCaptchaProvider reCaptchaKey="[Your recaptcha key]">
<YourReCaptchaComponent />
</GoogleReCaptchaProvider>,
document.getElementById('app')
);
An example of how to use these two hooks can found inside the example
folder. You will need to provide an .env file if you want to run it on your own machine.
RECAPTCHA_KEY=[YOUR_RECAPTCHA_KEY]