Integrate Google reCAPTCHA v3 with your React app.
- Install by executing
npm install @wojtekmaj/react-recaptcha-v3
oryarn add @wojtekmaj/react-recaptcha-v3
. - Import by adding
import { ReCaptchaProvider, ReCaptcha } from '@wojtekmaj/react-recaptcha-v3'
. - Use by wrapping your app in
<ReCaptchaProvider reCaptchaKey="…">
, then using<ReCaptcha />
component. UseonVerify
prop to get the token.
To use Google reCAPTCHA v3, you need to obtain a site key from the Google reCAPTCHA admin console. Visit Google reCAPTCHA to get your site key.
Add @wojtekmaj/react-recaptcha-v3 to your project by executing npm install @wojtekmaj/react-recaptcha-v3
or yarn add @wojtekmaj/react-recaptcha-v3
.
Here's an example of basic usage:
import { useState } from 'react';
import { ReCaptchaProvider, ReCaptcha } from '@wojtekmaj/react-recaptcha-v3';
export default function Sample() {
const [token, setToken] = useState('');
return (
<div className="Sample">
<header>
<h1>@wojtekmaj/react-recaptcha-v3 sample page</h1>
</header>
<div className="Sample__container">
<main className="Sample__container__content">
<ReCaptchaProvider reCaptchaKey="YOUR_SITE_KEY">
<form>
<ReCaptcha onVerify={setToken} />
<input type="hidden" name="g-recaptcha-response" value={token} />
<div>
<label htmlFor="input">Input</label>
<input id="input" type="text" />
</div>
<button type="submit">Submit</button>
</form>
</ReCaptchaProvider>
</main>
</div>
</div>
);
}
Alternative export name: GoogleReCaptchaProvider
.
Provides the reCAPTCHA context to your application. It should wrap your entire application or the part of your application where you want to use reCAPTCHA.
You may have multiple ReCaptchaProvider
components in your application, however, they must use the same settings.
Prop name | Description | Default value | Example |
---|---|---|---|
container | Configuration for the reCAPTCHA container. | n/a | { element: 'recaptcha', parameters: { badge: 'inline' } } |
children | The child components that will have access to the reCAPTCHA context. | n/a | <YourComponent /> |
language | The language code for the reCAPTCHA widget. | n/a | "en" |
reCaptchaKey | The reCAPTCHA site key. | n/a | "YOUR_SITE_KEY" |
scriptProps | Additional props for the reCAPTCHA script. | n/a | { async: true, defer: true } |
useEnterprise | Whether to use the reCAPTCHA Enterprise. | false |
true |
useRecaptchaNet | Whether to use recaptcha.net instead of google.com for loading the script. | false |
true |
Alternative export name: GoogleReCaptcha
.
Initializes the reCAPTCHA verification process.
Prop name | Description | Default value | Example |
---|---|---|---|
action | The action name for the reCAPTCHA verification. | n/a | "homepage" |
onVerify | Callback function to handle the token after verification. | n/a | (token) => console.log(token) |
refreshReCaptcha | A value to trigger reCAPTCHA verification again. | n/a | 7 |
Alternative export name: useGoogleReCaptcha
.
Used to get the Google reCAPTCHA v3 context.
container
- The container element for the reCAPTCHA widget if applicable.executeRecaptcha
- A function to execute the reCAPTCHA verification process.reCaptchaInstance
- The reCAPTCHA instance.
@wojtekmaj/react-recaptcha-v3
is a complete rewrite of react-google-recaptcha-v3
. It was created to enhance TypeScript support and fix some long-standing issues (handling of multiple instances, nonce
support, hiding reCAPTCHA badge, etc.).
@wojtekmaj/react-recaptcha-v3
is meant to be a drop-in replacement for react-google-recaptcha-v3
, so you can use it without any changes to your code, unless you rely on withGoogleReCaptcha
HOC which has already been deprecated in the original package.
The MIT License.
|
Wojciech Maj |
This project wouldn't be possible without the awesome work of Duong Tran who created its original version. Thank you!