google-react-recaptcha-v2/dist/index.mjs

React component for Google reCAPTCHA

// libs/presentation/ReCaptchaV2.tsx
import { forwardRef } from "react";

// libs/application/reCaptchaV2.usecase.ts
import { useEffect, useImperativeHandle, useRef } from "react";

// libs/infrastructure/reCaptchaV2.service.ts
var ReCaptchaV2Service = class {
  scriptId = "recaptcha-script";
  scriptSrc(hl) {
    return `https://www.google.com/recaptcha/api.js?render=explicit${hl ? `&hl=${hl}` : ""}`;
  }
  loadScript(hl) {
    if (!document.getElementById(this.scriptId)) {
      const script = document.createElement("script");
      script.id = this.scriptId;
      script.src = this.scriptSrc(hl);
      script.async = true;
      script.defer = true;
      document.body.appendChild(script);
    }
  }
  renderRecaptcha(container, props, callbacks) {
    if (typeof grecaptcha !== "undefined" && container) {
      return grecaptcha.render(container, {
        sitekey: props.isDevelop ? "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" : props.siteKey,
        size: props.size,
        badge: props.badge,
        theme: props.theme,
        tabindex: props.tabindex,
        callback: callbacks.onSuccess,
        "error-callback": callbacks.onError,
        "expired-callback": callbacks.onExpired
      });
    }
    return null;
  }
};

// libs/application/reCaptchaV2.usecase.ts
function useReCaptchaV2(props, ref) {
  const recaptchaRef = useRef(null);
  const widgetIdRef = useRef(null);
  const service = new ReCaptchaV2Service();
  useImperativeHandle(ref, () => ({
    execute: () => {
      return new Promise((resolve, reject) => {
        if (typeof grecaptcha !== "undefined" && widgetIdRef.current !== null) {
          const originalCallback = props.onSuccess;
          const tempCallback = (token) => {
            resolve(token);
            if (originalCallback) originalCallback(token);
            grecaptcha.reset(widgetIdRef.current ?? void 0);
          };
          window.___tempRecaptchaCallback = tempCallback;
          grecaptcha.execute(widgetIdRef.current.toString());
        } else {
          reject("grecaptcha no disponible");
        }
      });
    },
    reset: () => {
      if (typeof grecaptcha !== "undefined" && widgetIdRef.current !== null) {
        grecaptcha.reset(widgetIdRef.current);
      }
    },
    getResponse: () => {
      if (typeof grecaptcha !== "undefined" && widgetIdRef.current !== null) {
        return grecaptcha.getResponse(widgetIdRef.current);
      }
      return null;
    }
  }));
  useEffect(() => {
    service.loadScript(props.hl);
    const render = () => {
      if (typeof grecaptcha !== "undefined" && recaptchaRef.current && widgetIdRef.current === null) {
        widgetIdRef.current = service.renderRecaptcha(
          recaptchaRef.current,
          props,
          {
            onSuccess: (token) => {
              if (window.___tempRecaptchaCallback) {
                window.___tempRecaptchaCallback(token);
                delete window.___tempRecaptchaCallback;
              } else if (props.onSuccess) {
                props.onSuccess(token);
              }
            },
            onError: props.onError,
            onExpired: props.onExpired
          }
        );
      }
    };
    const intervalId = setInterval(() => {
      if (typeof grecaptcha !== "undefined") {
        clearInterval(intervalId);
        render();
      }
    }, 500);
    return () => {
      clearInterval(intervalId);
    };
  }, [props]);
  return recaptchaRef;
}

// libs/presentation/ReCaptchaV2.tsx
import { jsx } from "react/jsx-runtime";
var ReCaptchaV2 = forwardRef(
  (props, ref) => {
    const recaptchaRef = useReCaptchaV2(props, ref);
    return /* @__PURE__ */ jsx("div", { ref: recaptchaRef });
  }
);
var ReCaptchaV2_default = ReCaptchaV2;
export {
  ReCaptchaV2_default as ReCaptchaV2
};