React hook for google recaptcha v3
This hook loads the google-recaptcha script and allows you to get recaptcha token.
npm install --save use-recaptcha-v3
`Usage
`jsx
import React from 'react';
import Loader from 'loader-lib';
import ajax from 'ajax-lib';
import useRecaptcha from 'use-recaptcha-v3';const GRECAPTCHA_SITE_KEY = 'site_key';
const CURRENT_LANG = 'ru';
const RECAPTCHA_ACTION = 'test_action';
const RecaptchaExample = () => {
const { status, getRecaptchaToken } = useRecaptcha({
siteKey: GRECAPTCHA_SITE_KEY,
lang: CURRENT_LANG
});
const { loading, ready, error } = status;
const handleSendData = async () => {
try {
const recaptchaToken = await getRecaptchaToken(RECAPTCHA_ACTION);
ajax('/sendData').post({ recaptchaToken, otherData: {} })
} catch (err) {
console.error(err);
}
};
return (
{loading && }
{ready && }
{error && {error.message}
}
);
};
`API
`js
const { status, getRecaptchaToken } = useRecaptcha({ siteKey, lang });
`Entry params
`entryParams`: `required `
* `siteKey`: `required `. reCAPTCHA v3 key (https://g.co/recaptcha/v3)
* `lang`: ``. Google lang code (https://developers.google.com/recaptcha/docs/language)Returned hook value
`returnedHookValue`: ``
* `status`: ``
* `loading`: ``. Flag indicating that recaptcha is loading
* `ready`: ``. Flag indicating recaptcha readiness. Script loaded successfully grecaptcha ready to go
* `error`: ``. Error that occurred while loading the script
* `getRecaptchaToken`: ``.$3
`ts
type GetRecaptchaToken = (action: string) => Promise;
`* Takes parameter
`action`` - reCAPTCHA v3 action (https://developers.google.com/recaptcha/docs/v3)