added custom recaptcha handler

package.json

@@ -13,7 +13,7 @@
     "build": "tsc"
   },
   "license": "MIT",
-    "keywords": [
+  "keywords": [
     "forms",
     "form",
     "form-api",
@@ -23,8 +23,8 @@
     "formbold"
   ],
   "devDependencies": {
-    "typescript": "^5.1.6",
-    "@types/react-dom": "^18.2.6"
+    "@types/react-dom": "^18.2.6",
+    "typescript": "^5.1.6"
   },
   "peerDependencies": {
     "@types/react": "^18.2.14",

src/useForm.tsx

@@ -12,13 +12,22 @@ const useForm = (formId: string) => {
   });
   const [succeeded, setSucceeded] = useState(false);
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (
+    e: React.FormEvent<HTMLFormElement>,
+    recaptchaRef?: { current: { getValue: () => any } }
+  ) => {
     e.preventDefault();
 
     // Getting the Form data
     const data = new FormData(e.currentTarget);
     //@ts-ignore
     const value = Object.fromEntries(data.entries());
+    const finalData = { ...value };
+
+    // Conditionally add "g-recaptcha-response" if recaptchaRef is provided
+    if (recaptchaRef) {
+      finalData["g-recaptcha-response"] = recaptchaRef.current.getValue();
+    }
 
     //check if the values is empty
     //@ts-ignore
@@ -36,9 +45,8 @@ const useForm = (formId: string) => {
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify(value),
+      body: JSON.stringify(finalData),
     })
-      //@ts-ignore
       .then((res) => {
         setSucceeded(true);
       })
@@ -54,4 +62,4 @@ const useForm = (formId: string) => {
   return [{ error, succeeded }, handleSubmit] as const;
 };
 
-export { useForm };
+export { useForm };