chore: Use reacaptcha package

gatsby-ssr.js

@@ -4,4 +4,14 @@ exports.onRenderBody = ({ setPostBodyComponents, setBodyAttributes }) => {
   setBodyAttributes({
     className: 'no-js',
   })
+
+  setPostBodyComponents([
+    <script
+      type="text/javascript"
+      key="recaptcha-script"
+      async
+      defer
+      src="https://www.google.com/recaptcha/api.js"
+    />,
+  ])
 }

package.json

@@ -85,6 +85,7 @@
     "react-dom": "^16.12.0",
     "react-expand-animated": "^1.0.2",
     "react-helmet": "^5.2.1",
+    "react-recaptcha": "^2.3.10",
     "react-typography": "^0.16.19",
     "slugify": "^1.4.0",
     "smartypants": "^0.1.1"

src/components/common/recaptcha.js

@@ -1,6 +1,6 @@
-import React, { useEffect, useRef } from 'react'
+import React from 'react'
 import { useStaticQuery, graphql } from 'gatsby'
-import Helmet from 'react-helmet'
+import ReCaptcha from 'react-recaptcha'
 
 const Recaptcha = () => {
   const data = useStaticQuery(graphql`
@@ -13,27 +13,15 @@ const Recaptcha = () => {
     }
   `)
 
-  const captchaRef = useRef(false)
-
-  useEffect(() => {
-    if (typeof window !== 'undefined')
-      window.recaptchaOnload = () => {
-        window.grecaptcha.render(captchaRef.current, {
-          siteKey: data.site.siteMetadata.recaptchaKey,
-        })
-      }
-  }, [])
-
   return (
     <>
-      <Helmet>
-        <script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=recaptchaOnload" />
-      </Helmet>
-      <div
-        className="g-recaptcha"
-        ref={captchaRef}
-        data-sitekey={data.site.siteMetadata.recaptchaKey}
-      />
+      {typeof window !== 'undefined' && (
+        <ReCaptcha
+          sitekey={data.site.siteMetadata.recaptchaKey}
+          render="explicit"
+          elementID={`captcha-${Math.round(Math.random() * 1000)}`}
+        />
+      )}
     </>
   )
 }