Using Script Tags in Reactjs

Question

New to coding and react in general. I am wondering how to get this script(widget) from me index.html to appear in a component

index.html

// <div id="cibtWidgetHolder"></div>

    <script type="text/javascript">
      var gaJsHost = (("https:" == document.location.protocol) ? "https://" : "http://");
      var widgetHost = (("https:" == document.location.protocol) ? "https://" : "http://");
      document.write(unescape("%3Cscript src='" + gaJsHost + "stats.g.doubleclick.net/dc.js' 
      type='text/javascript'%3E%3C/script%3E"));
      document.write(unescape("%3Cscript src='"+ widgetHost + "cibtvisas.com/widget/widgetv2.js? 
method=js&cibtCitizenship=USA&cibtCode=65490&cibtURL=balboa.com&cibtBG=e1f0f2&cibtHeader=1c171c&lang=en&cibtWidgetVersion=3' type='text/javascript'%3E%3C/script%3E"));
      </script>

sections.js

  <Col md="3">
  <div id="cibtWidgetHolder"></div>
  </Col>

If I call the div in index.html, it renders, but only at the bottom of the page, not with my other content in sections.js

I've seen this sort of usage for others asking similar questions, but am not sure how to implement with mine:

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;

Any help is appreciated!

This is not something that should be within a rendered section. — user400654
– user400654, Commented Dec 3, 2019 at 20:58
can you clarify? If creating it in it's own component will work, then calling that component in section.js would work, I would do that, but I still fall back to not knowing what my next step is. Thank you — aexes3
– aexes3, Commented Dec 3, 2019 at 21:01
You may be able to improve from this SO stackoverflow.com/questions/46035999/… — aksappy
– aksappy, Commented Dec 3, 2019 at 21:45

Alex Wine · Accepted Answer · 2019-12-03 21:29:18Z

-1

If you are determined to add a script element to a react app then it may be worth checking out react-helmet or react-helmet-async.

This library will let you add script elements and other meta tags to the html in probably the cleanest way.

That being said there is probably a more efficient way using useEffect or onComponentMount for this process.

Hope this helps

answered Dec 3, 2019 at 21:29

Alex Wine

1093 silver badges6 bronze badges

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

Collectives™ on Stack Overflow

Using Script Tags in Reactjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related