Step Form

1"use client";
2 
3import { useRef, useEffect } from "react";
4import ReCAPTCHA from "react-google-recaptcha";
5 
6type Props = {
7  onVerify: (token: string | null) => void;
8  disabled?: boolean;
9};
10 
11export default function ReCAPTCHAField({ onVerify, disabled }: Props) {
12  const ref = useRef<ReCAPTCHA | null>(null);
13 
14  useEffect(() => {
15    // reset when re-enabled (optional)
16    if (!disabled) {
17      ref.current?.reset();
18    }
19  }, [disabled]);
20 
21  return (
22    <div className="flex justify-center ">
23      <ReCAPTCHA
24        ref={ref}
25        sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!}
26        onChange={(token) => onVerify(token)}
27        onExpired={() => onVerify(null)}
28      />
29    </div>
30  );
31}