Usare un reCAPTCHA personalizzato con Formspree React

Se usi React e vuoi proteggere il tuo modulo con un reCAPTCHA, puoi usare reCAPTCHA v3. Puoi usare Formspree React per eseguire la funzione reCAPTCHA quando il modulo viene inviato.

Formspree React ti consente di passare un oggetto data aggiuntivo che contiene una promise da eseguire quando il modulo viene inviato. Formspree eseguirà la funzione per tuo conto nel gestore di invio.

Di seguito un modulo di esempio che usa 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>
  );
}