React, how to add external script and make its functions available?

Question

I wonder how I would add an external script to an React application and make its functions available. Let's take this script https://www.cssscript.com/confetti-falling-animation/

In a "not-react-application" I would add it like this in my DOM

<script src="confetti.js"></script>

and then call it's functions like this

startConfetti();

or

stopConfetti();

However, this does not work in React. I know that I can add a <script /> tag like this:

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

    script.src = './confetti.js';
    script.async = true;

    document.body.appendChild(script);

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

But this does not make the functions startConfetti() or stopConfetti() available. They are undefined.

How would I add the script and its functionalities in a React App?

Youssouf Oumar · Accepted Answer · 2022-03-28 18:33:37Z

4

Add the script in index.html's head tag, like so (with the correct path to the JavaScript file):

<script src="confetti.js"></script>

Then in your React component, you could get it with the help of window object, this way:

const startConfetti = window.startConfetti;
startConfetti();

edited Mar 28, 2022 at 18:33

answered Mar 28, 2022 at 18:13

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

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

1 Comment

Quentin Over a year ago

@Stophface — You need to use a URL to your script. You can't use a URL hosted by the react dev server. That doesn't deal with serving static files.

Collectives™ on Stack Overflow

React, how to add external script and make its functions available?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related