React Hook for Google reCAPTCHA v3
npm install react-google-recaptcha-hookhttps://www.google.com/recaptcha/intro/v3.html
- ⚛ React 19 support
- ✨ Simple and Easy
- 🦋 Lightweight
- 🟢 Zero dependencies
- ⬇️ Asynchronous APIs
``sh`
npm install react-google-recaptcha-hook
`javascript
import { useGoogleReCaptcha } from "react-google-recaptcha-hook";
const FormComponent = () => {
const { executeGoogleReCaptcha } = useGoogleReCaptcha(SITE_KEY);
const submit = async () => {
const token = await executeGoogleReCaptcha(ACTION_NAME);
// Do whatever you want with the token
};
return ;
};
`
`javascript${YOUR_SITE_KEY}
const {
// execute reCAPTCHA with action, return token
// async (action: string) => Promise
executeGoogleReCaptcha,
// hide / show recaptcha-badge
// async () => Promise
hideGoogleReCaptcha,
showGoogleReCaptcha,
} = useGoogleReCaptcha(
, // your site key${BOOLEAN}
{
hide: , // optional, true if you want to hide recaptcha-badge beforehand${LANGUAGE_CODE}
language: , // optional, https://developers.google.com/recaptcha/docs/language${BOOLEAN}
enterprise: , // optional, true if you want to use enterprise edition${BOOLEAN}
recaptchaNet: , // optional, true if you want to use recaptcha.net instead of google.com``
},
);
> You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow.
See: https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed