How to load javascript cdn scripts in component instead of index.html?

Question

I have three scripts in the index.html at the public folder :

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.6.1/jquery.zoom.min.js"></script>
    <script>
      $(document).ready(function () {
        $("#ex1").zoom();
      });
    </script>

And in the component I have an image which works with these scripts :

import React from "react";
import "./Home.css";

function Home() {
  return (
    <React.Fragment>
      <div class="zoom" id="ex1">
        <img
          src="https://i.pinimg.com/736x/3e/3e/49/3e3e49c8e76076f09ef1170a95b09cfb.jpg"
          class="img"
          alt="Daisy on the Ohoopee"
        />
      </div>
    </React.Fragment>
  );
}

export default Home;

I want to have all the scripts in the exact component but I don't know how .

How can I move all the scripts from the index.html at the public folder into my react component ?

Ako · Accepted Answer · 2021-08-06 19:36:32Z

1

You can create the script dynamically:

useEffect(()=>{
   const script = document.createElement("script");    
   script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
   script.async = true;

   document.body.appendChild(script);
},[]);

but it's not recommended to load scripts inside the component.

answered Aug 6, 2021 at 19:36

Ako

1,6111 gold badge13 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

How to load javascript cdn scripts in component instead of index.html?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related