![Oracle Drags Its Feet in the JavaScript Trademark Dispute](https://cdn.sanity.io/images/cgdhsj6q/production/919c3b22c24f93884c548d60cbb338e819ff2435-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
react-google-recaptcha-v3
Advanced tools
The react-google-recaptcha-v3 npm package is a React component wrapper for Google reCAPTCHA v3, which helps protect your website from spam and abuse while letting real users pass through with ease. It provides a simple way to integrate Google reCAPTCHA v3 into your React applications.
Loading reCAPTCHA
This code demonstrates how to load the Google reCAPTCHA v3 script by wrapping your application with the GoogleReCaptchaProvider component and providing your reCAPTCHA site key.
import React from 'react';
import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
const App = () => (
<GoogleReCaptchaProvider reCaptchaKey="your-recaptcha-key">
<YourComponent />
</GoogleReCaptchaProvider>
);
export default App;
Executing reCAPTCHA
This code demonstrates how to execute the reCAPTCHA verification process within a component using the useGoogleReCaptcha hook. The executeRecaptcha function is called to get the reCAPTCHA token.
import React, { useEffect } from 'react';
import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';
const YourComponent = () => {
const { executeRecaptcha } = useGoogleReCaptcha();
useEffect(() => {
const handleReCaptchaVerify = async () => {
if (!executeRecaptcha) {
console.log('Execute recaptcha not yet available');
return;
}
const token = await executeRecaptcha('homepage');
console.log(token);
};
handleReCaptchaVerify();
}, [executeRecaptcha]);
return <div>Your Component</div>;
};
export default YourComponent;
The react-recaptcha-v3 package is another React wrapper for Google reCAPTCHA v3. It provides similar functionality to react-google-recaptcha-v3, allowing you to easily integrate reCAPTCHA v3 into your React applications. The main difference is in the API and the way components and hooks are structured.
The react-google-recaptcha package is a React component for Google reCAPTCHA v2. While it does not support reCAPTCHA v3, it is useful for applications that still rely on the older version of reCAPTCHA. It provides a simple way to integrate reCAPTCHA v2 into your React applications.
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.
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
since is equivalent to the reCAPTCHA v3.
The complete documentation to the enterprise version you can see 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.
Usually, your application only needs one provider. You should place it as high as possible in your React tree. It's to make sure you only have one instance of Google Recaptcha per page and it doesn't reload unecessarily when your components re-rendered.
Same thing applied when you use this library with framework such as Next.js or React Router and only want to include the script on a single page. Try to make sure you only have one instance of the provider on a React tree and to place it as high (on the tree) as possible.
Props | Type | Default | Required? | Note |
---|---|---|---|---|
reCaptchaKey | String | Yes | Your recaptcha key, get one from here | |
scriptProps | Object | No | You can customize the injected script tag with this prop. It allows you to add async , defer , nonce attributes to the script tag. You can also control whether the injected script will be added to the document body or head with appendTo attribute. | |
language | String | No | optional prop to support different languages that is supported by Google Recaptcha. https://developers.google.com/recaptcha/docs/language | |
useRecaptchaNet | Boolean | false | No | 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 |
useEnterprise | Boolean | false | No | Enterprise option |
container.element | String HTMLElement | No | Container ID where the recaptcha badge will be rendered | |
container.parameters | Object | No | Configuration for the inline badge (See google recaptcha docs) |
import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
ReactDom.render(
<GoogleReCaptchaProvider
reCaptchaKey="[Your recaptcha key]"
language="[optional_language]"
useRecaptchaNet="[optional_boolean_value]"
useEnterprise="[optional_boolean_value]"
scriptProps={{
async: false, // optional, default to false,
defer: false, // optional, default to false
appendTo: 'head', // optional, default to "head", can be "head" or "body",
nonce: undefined // optional, default undefined
}}
container={{ // optional to render inside custom element
element: "[required_id_or_htmlelement]",
parameters: {
badge: '[inline|bottomright|bottomleft]', // optional, default undefined
theme: 'dark', // optional, default undefined
}
}}
>
<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, also supports a prop refreshReCaptcha
which supports any type of value and is used to force recaptcha to revalidate (you can use a timestamp updated after every submit), there is an example below.
import {
GoogleReCaptchaProvider,
GoogleReCaptcha
} from 'react-google-recaptcha-v3';
ReactDom.render(
<GoogleReCaptchaProvider reCaptchaKey="[Your recaptcha key]">
<GoogleReCaptcha onVerify={handleVerify} />
</GoogleReCaptchaProvider>,
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 (
<div>
<GoogleReCaptcha
onVerify={token => {
setToken(token);
}}
/>
</div>
);
};
// Example of refreshReCaptcha option:
const MyComponent: FC = () => {
const [token, setToken] = useState();
const [refreshReCaptcha, setRefreshReCaptcha] = useState(false);
const onVerify = useCallback((token) => {
setToken(token);
});
const doSomething = () => {
/* do something like submit a form and then refresh recaptcha */
setRefreshReCaptcha(r => !r);
}
return (
<div>
<GoogleReCaptcha
onVerify={onVerify}
refreshReCaptcha={refreshReCaptcha}
/>
<button onClick={doSomething}>
Do Something
</button>
</div>
);
};
If you prefer a React Hook approach over the old good Higher Order Component, you can choose to use the custom hook useGoogleReCaptcha
over the HOC withGoogleReCaptcha
.
The executeRecaptcha
function returned from the hook can be undefined when the recaptcha script has not been successfully loaded.
You can do a null check to see if it's available or not.
How to use the hook:
import {
GoogleReCaptchaProvider,
useGoogleReCaptcha
} from 'react-google-recaptcha-v3';
const YourReCaptchaComponent = () => {
const { executeRecaptcha } = useGoogleReCaptcha();
// Create an event handler so you can call the verification on button click event or form submit
const handleReCaptchaVerify = useCallback(async () => {
if (!executeRecaptcha) {
console.log('Execute recaptcha not yet available');
return;
}
const token = await executeRecaptcha('yourAction');
// Do whatever you want with the token
}, [executeRecaptcha]);
// You can use useEffect to trigger the verification as soon as the component being loaded
useEffect(() => {
handleReCaptchaVerify();
}, [handleReCaptchaVerify]);
return <button onClick={handleReCaptchaVerify}>Verify recaptcha</button>;
};
ReactDom.render(
<GoogleReCaptchaProvider reCaptchaKey="[Your recaptcha key]">
<YourReCaptchaComponent />
</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.
You are recommended to use the custom hook useGoogleReCaptcha
over the HOC whenever you can. The HOC can be removed in future version.
import {
GoogleReCaptchaProvider,
withGoogleReCaptcha
} from 'react-google-recaptcha-v3';
class ReCaptchaComponent extends Component<{}> {
handleVerifyRecaptcha = async () => {
const { executeRecaptcha } = (this.props as IWithGoogleReCaptchaProps)
.googleReCaptchaProps;
if (!executeRecaptcha) {
console.log('Recaptcha has not been loaded');
return;
}
const token = await executeRecaptcha('homepage');
};
render() {
return (
<div>
<button onClick={this.handleVerifyRecaptcha}>Verify Recaptcha</button>
</div>
);
}
}
export const WithGoogleRecaptchaExample =
withGoogleReCaptcha(ReCaptchaComponent);
ReactDom.render(
<GoogleReCaptchaProvider reCaptchaKey="[Your recaptcha key]">
<WithGoogleRecaptchaExample />
</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]
FAQs
React component for google-recaptcha v3
The npm package react-google-recaptcha-v3 receives a total of 54,851 weekly downloads. As such, react-google-recaptcha-v3 popularity was classified as popular.
We found that react-google-recaptcha-v3 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.