Usar un reCAPTCHA personalizado con Formspree React

Si estás usando React y quieres proteger tu formulario con un reCAPTCHA, puedes utilizar reCAPTCHA v3. Puedes usar Formspree React para ejecutar la función de reCAPTCHA cuando se envíe el formulario.

Formspree React te permite pasar un objeto data adicional que contiene una promise que se ejecutará cuando se envíe el formulario. Formspree ejecutará la función en tu nombre dentro del submit handler.

A continuación se muestra un formulario de ejemplo que utiliza Formspree React con 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>Thanks for your submission!</p>;
  }
  return (
    <form onSubmit={handleSubmit}>
      // ...    
    </form>
  );
}