google-v3-recaptchas

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.

Installation

npm install google-v3-recaptchas

Usage

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

Component Props

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

Notes

Made with love by Valeed Mehmood