@upbudget/belvo-js/dist/esm/react/hooks/use-belvo-script.js

React component for Belvo

import { useEffect, useState } from "react";
import { BelvoEvents } from "../types";
const BELVO_SCRIPT_SRC = "https://cdn.belvo.io/belvo-widget-1-stable.js";
function useBelvoScript(src = BELVO_SCRIPT_SRC, analytics) {
  const [ready, setReady] = useState(false);
  const [error, setError] = useState(null);
  useEffect(() => {
    const existingScript = document.querySelector(
      `script[src="${src}"]`
    );
    if (existingScript) {
      if (window.belvoSDK) {
        setReady(true);
        return void 0;
      }
      const handleLoad = () => {
        analytics?.track(BelvoEvents.SCRIPT_LOADED);
        setReady(true);
      };
      const handleError = () => {
        const err = new Error(`Failed to load ${src}`);
        analytics?.track(BelvoEvents.SCRIPT_ERROR, { error: err.message });
        setError(err);
      };
      existingScript.addEventListener("load", handleLoad);
      existingScript.addEventListener("error", handleError);
      return () => {
        existingScript.removeEventListener("load", handleLoad);
        existingScript.removeEventListener("error", handleError);
      };
    }
    const script = document.createElement("script");
    script.src = src;
    script.async = true;
    script.onload = () => {
      analytics?.track(BelvoEvents.SCRIPT_LOADED);
      setReady(true);
    };
    script.onerror = () => {
      const err = new Error(`Failed to load ${src}`);
      analytics?.track(BelvoEvents.SCRIPT_ERROR, { error: err.message });
      setError(err);
    };
    document.body.appendChild(script);
    return void 0;
  }, [src, analytics]);
  return { ready, error };
}
export {
  useBelvoScript
};
//# sourceMappingURL=use-belvo-script.js.map