React js multi useScript [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

Want to improve this question? As written, this question is lacking some of the information it needs to be answered. If the author adds details in comments, consider editing them into the question. Once there's sufficient detail to answer, vote to reopen the question.

Closed 3 years ago.

Improve this question

I have the following code:

Hook:

import { useEffect } from 'react';

const useScript = url => {
    useEffect(() => {
        const script = document.createElement('script');

        script.src = url;
        script.async = true;

        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        }
    }, [url]);
};

export default useScript;

Use:

useScript("script1.js")
useScript("script2.js")
useScript("script3.js")

How I would like to use it:

useScriptMulti("script1.js","script2.js","script3.js")

Can you give me a hand?

A hand with what? You haven't described a problem...? You have a hook, and you want to write another hook. Give it a try! If you get stuck, post a question with your attempt so people can help you with it. — T.J. Crowder
– T.J. Crowder, Commented Oct 12, 2022 at 6:51
That said, a couple of observations: 1. There's basically no point in the cleanup callback there, removing the script element from the DOM doesn't do anything to the code it loaded. Once you've loaded a script, you can't unload it (in the general case; it's possible to write a script that can fully clean itself up). 2. There's no reason to use async = true on a script element you're adding dynamically after the main HTML parsing is complete, it has no effect. — T.J. Crowder
– T.J. Crowder, Commented Oct 12, 2022 at 6:55
The same thing applies here: usehooks-ts.com/react-hook/use-script — Paul
– Paul, Commented Oct 12, 2022 at 7:47
Maybe there's some subtlety on the async thing I'm missing, though frankly I don't think so. Note that they don't remove the script element in the cleanup (presumably because there's no point). — T.J. Crowder
– T.J. Crowder, Commented Oct 12, 2022 at 7:49
The removal of the listener because it is done what is it for in this case? — Paul
– Paul, Commented Oct 12, 2022 at 7:58

marvinav · Accepted Answer · 2022-10-12 06:55:02Z

1

You can pass array of urls to hook.

const useScripts = urls => {
    useEffect(() => {

        const scripts = urls.map((url) => {
            const script = document.createElement('script');

            script.src = url;
            script.async = true;
            document.body.appendChild(script);
            return script;
        };

        return () => {
            srcipts.forEach((script) => document.body.removeChild(script));
        }
    }, [urls]);
};

export default useScript;

And then use it for one script useScripts(["script1.js"]) or for many useScripts(["script1.js", "script2.js"])

answered Oct 12, 2022 at 6:55

marvinav

7275 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React js multi useScript [closed]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related