useScript

import { useEffect } from "react";

import { useScript } from "@teasim/hooks";

export default function Component() {
  // Load the script asynchronously
  const status = useScript(`https://code.jquery.com/jquery-3.5.1.min.js`, {
    removeOnUnmount: false,
    id: "jquery",
  });

  useEffect(() => {
    if (typeof jQuery !== "undefined") {
      // jQuery is loaded => print the version
      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
      alert(jQuery.fn.jquery);
    }
  }, [status]);

  return (
    <div>
      <p>{`Current status: ${status}`}</p>

      {status === "ready" && <p>You can use the script here.</p>}
    </div>
  );
}