Use a javascript SDK in a script tag in react.js

Question

Basically I'm trying to implement an external JDK offered by a third party into my react application. It essentially plugs an interactive map on your page. In the usage guide it's implemented like such:

<div class="mapdiv" id="some_id" other_important_content="something"></div>
<script src="https://example.com/script.js"></script>

You just stick that anywhere in your html and it loads up the map in the mapdiv.

Obviously, this isn't how react handles this. I want a map widget component, but how should I include this script? There's no NPM package for it. I'm assuming what happens is the script looks for the div and loads in the relevant content. What is the best practice for handling this in react?

LonniE · Accepted Answer · 2018-10-10 22:58:57Z

1

You could just include it in your index.html like this

<!doctype html>
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>

  <script async defer src="https://example.com/script.js"></script>
  <script src="./index.js" async></script>

</body>
</html>

Or with componentDidMount:

  componentDidMount() {
    loadJS(
      "https://example.com/script.js"
    ) 
  }

function loadJS(src) {
  const ref = window.document.getElementsByTagName("script")[0] 
  const script = window.document.createElement("script") 
  script.src = src 
  script.async = true 
  ref.parentNode.insertBefore(script, ref) 
}

answered Oct 10, 2018 at 22:58

LonniE

1091 gold badge2 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

Use a javascript SDK in a script tag in react.js

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