Loading javascript tag into react component

Question

I'm trying to load a Trading View Widget inside a react component. I tried using _dangerouslySetInnerHTML, however, it doesn't run the javascript code.

I also tried this:

import React from 'react';

export default class TradingView extends React.Component{

  constructor(props){
    super(props);
  }

  componentDidMount() {
    const tradingViewCode = '<!-- TradingView Widget BEGIN --><script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"></script><script type="text/javascript">new TradingView.widget({"autosize": true,"symbol": "BITFINEX:BTCUSD","interval": "D","timezone": "America/New_York","theme": "White","style": "1","locale": "en","toolbar_bg": "#f1f3f6","enable_publishing": false,"hide_top_toolbar": true,"save_image": false,"hideideas": true});</script><!-- TradingView Widget END -->';
    new Function(tradingViewCode)();
  }

  render(){
    return (
      <noscript />
    );
  }
}

Alex B. · Accepted Answer · 2023-05-03 05:37:31Z

1

One way could be to create & append those script elements to your <head> in componentDidMount like this:

componentDidMount() {
    var headElem = document.getElementsByTagName('head')[0];

    var tradingWidgetSource = document.createElement('script');
    tradingWidgetSource.type = "text/javascript";
    headElem.appendChild(tradingWidgetSource);
    tradingWidgetSource.onload = function(){
        // Do your init logic here instead of the <script> tag.
        new TradingView.widget({"autosize": true,"symbol": "BITFINEX:BTCUSD","interval": "D","timezone": "America/New_York","theme": "White","style": "1","locale": "en","toolbar_bg": "#f1f3f6","enable_publishing": false,"hide_top_toolbar": true,"save_image": false,"hideideas": true});
    }
    tradingWidgetSource.src = "https://d33t3vvu2t2yu5.cloudfront.net/tv.js";   
}

edited May 3, 2023 at 5:37

answered Dec 1, 2016 at 1:39

Alex B.

464 bronze badges

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

Collectives™ on Stack Overflow

Loading javascript tag into react component

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