useScript Hook React

import { useState, useEffect } from "react";

const useScript = (src) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    const script = document.createElement("script");
    script.src = src;
    script.async = true;

    const handleLoad = () => {
      setIsLoaded(true);
    };

    const handleError = () => {
      setIsError(true);
    };

    script.addEventListener("load", handleLoad);
    script.addEventListener("error", handleError);

    document.body.appendChild(script);

    return () => {
      script.removeEventListener("load", handleLoad);
      script.removeEventListener("error", handleError);
      document.body.removeChild(script);
    };
  }, [src]);

  return { isLoaded, isError };
};

// Usage
const ScriptLoadExample = () => {
  const scriptUrl =
    "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js";
  const { isLoaded, isError } = useScript(scriptUrl);

  if (isError) {
    return <p>Error loading script.</p>;
  }

  if (!isLoaded) {
    return <p>Loading script...</p>;
  }

  return (
    <div>
      <p>Script has been loaded and executed.</p>
    </div>
  );
};