Add recaptcha

src/RecaptchaInput.jsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useRef } from "react";
+
+export function RecaptchaInput({ publicKey, onResponse }) {
+  const containerRef = useRef();
+  const recaptchaRef = useRef();
+
+  useEffect(() => {
+    const onRecaptchaLoaded = () => {
+      if (!recaptchaRef.current) {
+        return;
+      }
+
+      window.grecaptcha.render(recaptchaRef.current, {
+        sitekey: publicKey,
+        callback: (response) => {
+          if (!recaptchaRef.current) {
+            return;
+          }
+
+          onResponse(response);
+        },
+      });
+    };
+
+    if (
+      typeof window.grecaptcha !== "undefined" &&
+      typeof window.grecaptcha.render === "function"
+    ) {
+      onRecaptchaLoaded();
+    } else {
+      window.mxOnRecaptchaLoaded = onRecaptchaLoaded;
+      const scriptTag = document.createElement("script");
+      scriptTag.setAttribute(
+        "src",
+        `https://www.recaptcha.net/recaptcha/api.js?onload=mxOnRecaptchaLoaded&render=explicit`
+      );
+      containerRef.current.appendChild(scriptTag);
+    }
+  }, []);
+
+  return (
+    <div ref={containerRef}>
+      <div ref={recaptchaRef} />
+    </div>
+  );
+}