init

src/hooks/recaptcha.js

@@ -0,0 +1,68 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useSelector } from "react-redux";
+import { FormControl } from "@material-ui/core";
+import ReCaptcha from "../component/Login/ReCaptcha";
+import { defaultValidate, useStyle } from "./useCaptcha";
+
+const Recaptcha = ({ captchaRef, setLoading }) => {
+    const classes = useStyle();
+
+    const [captcha, setCaptcha] = useState("");
+
+    const reCaptchaKey = useSelector(
+        (state) => state.siteConfig.captcha_ReCaptchaKey
+    );
+
+    useEffect(() => {
+        captchaRef.current.captchaCode = captcha;
+    }, [captcha]);
+
+    useEffect(() => setLoading(false), []);
+
+    return (
+        <div className={classes.captchaContainer}>
+            <FormControl margin="normal" required fullWidth>
+                <div>
+                    <ReCaptcha
+                        style={{
+                            display: "inline-block",
+                        }}
+                        sitekey={reCaptchaKey}
+                        onChange={(value) => setCaptcha(value)}
+                        id="captcha"
+                        name="captcha"
+                    />
+                </div>
+            </FormControl>{" "}
+        </div>
+    );
+};
+
+export default function useRecaptcha(setLoading) {
+    const isValidate = useRef({
+        isValidate: true,
+    });
+
+    const captchaParamsRef = useRef({
+        captchaCode: "",
+    });
+
+    const CaptchaRender = useCallback(
+        function RecaptchaRender() {
+            return (
+                <Recaptcha
+                    captchaRef={captchaParamsRef}
+                    setLoading={setLoading}
+                />
+            );
+        },
+        [captchaParamsRef, setLoading]
+    );
+
+    return {
+        isValidate,
+        validate: defaultValidate,
+        captchaParamsRef,
+        CaptchaRender,
+    };
+}