import { useGoogleRecaptcha } from "google-recaptcha-v3";

import React from "react";
import { useGoogleRecaptcha } from "google-recaptcha-v3"

const YourComponent = () => {
  const siteKey = "YOUR_SITE_KEY";
  const action = "submit";
  const { token } = useGoogleRecaptcha(siteKey, action);
  // You can use token to send request to API
  return (
    <div>
     

    </div>
  );
};

export default YourComponent;

import React, { useState } from 'react';
import { ReCaptchaComponent } from "google-recaptcha-v3"


const MyForm: React.FC = () => {
  const [token, setToken] = useState<string>('');

  const handleVerify = (token: string) => {
    setToken(token);
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log('Form submitted with token:', token);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" name="name" required />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input type="email" id="email" name="email" required />
      </div>
      <ReCaptchaComponent
        siteKey="YOUR_RECAPTCHA_SITE_KEY"
        action="submit_form"
        onVerify={handleVerify}
      />
      <button type="submit" disabled={!token}>Submit</button>
    </form>
  );
};

export default MyForm;