@newsteam/use-script

@newsteam/use-script

Loads a script and returns a status when the script is loaded or fails to load.

Example

import {useScript} from "@newsteam/use-script";

const MyComponent = () => {
    const script = useScript("//platform.instagram.com/en_US/embeds.js");

    if (script === "ready") {
        return <InstagramWidget />;
    }
};

Edge Cases

Sometimes a script will use an interal reference the id of the script tag and not function correctly if that id attribute is not set.

This hook supports adding an id to the script tag it generates.

import {useScript} from "@newsteam/use-script";

const MyComponent = () => {
    const script = useScript({
        src: "https://e.infogram.com/js/dist/embed-loader-min.js",
        id: "infogram-async"
    });

    if (script === "ready") {
        return <InfogramWidget />;
    }
};

Sometimes a script will modify the dom at the location of the script tag. This is common with widget embed scripts.

This hook supports appending the script tag into a custom parent instead of the head of the document.

import {useScript} from "@newsteam/use-script";

const MyComponent = ({parent}) => {
    const script = useScript({
        src: "https://e.infogram.com/js/dist/embed-loader-min.js",
        parent
    });

    if (script === "ready") {
        return <InfogramWidget />;
    }
};