React component for Google reCAPTCHA v3. Please note this package is only for functional based components, if you want to convert it into class based then handle regenerate states accordingly.
npm install google-v3-recaptchas
You need to sign up on Google recaptcha console for sitekey of v3 reCaptcha signup.
Please follow the example below.
Code Example:
import {useState} from 'react';
import V3Recaptcha from "google-v3-recaptchas";
const yourComponent = () => {
// this usestate hook is required for regeneration process, because recaptcha usually expires after 2 minutes.
const [regenerate, setRegenerate] = useState(false)
const handleChange = (token) => {
// Whenever a new token is generated on ready or regenerated state, then this function will be run automatically.
// Handle your token state management in this function accordingly
console.log(token)
}
return (
<V3Recaptcha
sitekey="your_site_key"
action="login"
verifyToken={handleChange}
regenerate={regenerate}
setRegenerate={setRegenerate}
/>
)
}
export default yourComponent
Properties used to customise the rendering:
Name | Type | Description |
---|---|---|
sitekey | string | Your sitekey from google recaptcha console |
action | string | you will define actions here like, login and homepage etc |
verifyToken | func | Whenever a new token is generated on ready or regenerated state, then this function will be run automatically |
regenerate | boolean | set this to true if you want to regenerate v3 token on any clicks or before form submission |
setRegenerate | func | this will be a second argument of usestate hook, please use it exactly like we show you in example above |
Made with love by Valeed Mehmood