useScript

Custom hook that dynamically loads scripts and tracking their loading status.

Usage

import { useEffect } from "react";
import { useScript } from "@tealess/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>
);
}