Formspree React でカスタム reCAPTCHA を使用する

React を使用していて reCAPTCHA でフォームを保護したい場合は、reCAPTCHA v3 を使用できます。Formspree React を使用して、フォーム送信時に reCAPTCHA 関数を実行できます。

Formspree React では、フォームが送信されたときに実行される Promise を含む追加データオブジェクトを渡すことができます。Formspree は送信ハンドラーで関数を代わりに実行します。

reCAPTCHA v3 で Formspree React を使用するサンプルフォームを以下に示します：

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>
  );
}