Utilizando reCAPTCHA personalizado com Formspree React

Se você está utilizando React e deseja proteger seu formulário com reCAPTCHA, o reCAPTCHA v3 é uma boa alternativa. É possível usar a biblioteca Formspree React para executar a verificação reCAPTCHA quando seu formulário for enviado.

A biblioteca Formspree React permite que você passe um data object extra que contenha um promise que será executado quando seu formulário é submetido. Formspree executará a função no submit handler do formulário.

Um exemplo abaixo de um formulário que utiliza Formspree React com reCAPTCHA v3:

import * as React from "react";
import { useForm, ValidationError } from "@formspree/react";
import { useGoogleReCaptcha } from "react-google-recaptcha-v3";

export default function ContactForm() {
  const { executeRecaptcha } = useGoogleReCaptcha();

  const [state, handleSubmit] = useForm("<hashid>", {
    data: { "g-recaptcha-response": executeRecaptcha }
  });

  if (state.succeeded) {
    return <p>Obrigado pelo envio!</p>;
  }
  return (
    <form onSubmit={handleSubmit}>
      // ...    
    </form>
  );
}