react recaptcha signup form

1import {
2  GoogleReCaptchaProvider,
3  useGoogleReCaptcha
4} from 'react-google-recaptcha-v3';
5import { Button } from '@chakra-ui/core';
6import React from 'react';
7
8const CaptchaButton = ({ onVerifyCaptcha }) => {
9  const { executeRecaptcha } = useGoogleReCaptcha();
10  const clickHandler = async () => {
11    if (!executeRecaptcha) {
12      return;
13    }
14
15    const token = await executeRecaptcha('contact');
16
17    onVerifyCaptcha(token);
18  };
19
20  return (
21    <Button onClick={clickHandler}>
22      Please validate you are a human.
23    </Button>
24  );
25};
26
27export const ReCaptcha = ({ onVerifyCaptcha }) => (
28  <GoogleReCaptchaProvider
29    reCaptchaKey="<YOUR_KEY>"
30  >
31    <CaptchaButton onVerifyCaptcha={onVerifyCaptcha} />
32  </GoogleReCaptchaProvider>
33);

1import { ReCaptcha, StringInput, Textarea } from '@forms/base';
2import React, { useEffect, useState } from 'react';
3import { useForm } from 'react-hook-form';
4
5export const ContactForm = () => {
6  const { handleSubmit, errors, formState, register, setValue } = useForm({
7    mode: 'onChange'
8  });
9  const [isSubmitting, setIsSubmitting] = useState(false);
10
11  const onSubmit = (values) => {
12    setIsSubmitting(true);
13    console.log(values);
14
15    setIsSubmitting(false);
16  };
17
18  const onVerifyCaptcha = (token) => {
19    setValue('captchaToken', token);
20  };
21
22  useEffect(() => {
23    register({ name: 'captchaToken' }, { required: true });
24  });
25
26  return (
27    <form onSubmit={handleSubmit(onSubmit)}>
28      <ReCaptcha onVerifyCaptcha={onVerifyCaptcha} />
29      <button
30        isLoading={isSubmitting}
31        type="submit"
32      >
33        Send Message
34      </button>
35    </form>
36  );
37};