how to embed external js script file into react component

Question

I can add this file into react component but widget appears under the page. not in the div in render method no style can change its position.

https://www.tradingview.com/widget/market-movers/

  componentWillMount() {
    const script = document.createElement("script");
    const script2 = document.createElement("script");
    script.src =
      "https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js";
    script2.src =
      "https://s3.tradingview.com/external-embedding/embed-widget-hotlists.js";
    script.async = true;
    script2.async = true;
    //script.onload = () => this.scriptLoaded();

    // document.body.appendChild(script);
    // document.body.appendChild(script2);
  }

hurricane · Accepted Answer · 2020-02-21 21:28:10Z

Because you are trying to append your new script under body element. You need to use refs and you need to append your new script with using 'componentDidMount'

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

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  componentDidMount() {
    const script = document.createElement("script");
    const script2 = document.createElement("script");
    script.src =
      "https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js";
    script2.src =
      "https://s3.tradingview.com/external-embedding/embed-widget-hotlists.js";
    script.async = true;
    script2.async = true;

    this.myRef.appendChild(script);
    this.myRef.appendChild(script2);
  }
  render() {
    return (
      <div
        ref={DOMNodeRef => {
          this.myRef = DOMNodeRef;
        }}
      >
        test
      </div>
    );
  }
}

https://codesandbox.io/s/gracious-noether-qvqgj

Collectives™ on Stack Overflow

how to embed external js script file 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