How To To Insert TradingView Widget Into React Js Which Is In Script Tag Link: Https://www.tradingview.com/widget/market-overview/

export default class extends Component { render() { return (

{ /*** * enter the

Solution 1:

export default  class Tabsshow extends React.PureComponent {
    constructor(props) {
        super(props);
        this._ref = React.createRef();
    }
 componentDidMount() {
        const script = document.createElement('script');
        script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js'
        script.async = true;
        script.innerHTML = /* JSON-ENCODED SETTINGS STRING FROM EMBED CODE */
        this._ref.current.appendChild(script);
    }
    render() {
        return(
        <div class="tradingview-widget-container" ref={this._ref}>
            <div class="tradingview-widget-container__widget"></div>
           
        </div>
        );
    }
   
}

Solution 2:

This should work in your case

class App extends  React.Component {

    componentDidMount() {
        const script = document.createElement('script');
        script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js'
        script.async = true;
        script.innerHTML = JSON.stringify({ /* JSON object */})
        document.getElementById("myContainer").appendChild(script);
    }

    render() {
        return(
      <div id="myContainer">
        <div className="tradingview-widget-container">
           <div className="tradingview-widget-container__widget">
            </div>
        </div>
     </div>
        );
    }
    }

Solution 3:

I suggest you to use React Helmet

Below is a given demo:

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link  href="http://example.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

You can also add your script in your code. Let me know if it helps you.

EDITED

In your case, you can do the following:

import React from "react";
import {Helmet} from "react-helmet";
export default class MyPro extends Component {
    render() {
        return (
            <Helmet>
               <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js" async>
               {`
                {
                    "showChart": true,
                    "locale": "en",
                    "largeChartUrl": "",
                    "width": "400",
                    "height": "600",
                    "plotLineColorGrowing": "rgba(60, 188, 152, 1)",
                    "plotLineColorFalling": "rgba(255, 74, 104, 1)",
                    "gridLineColor": "rgba(233, 233, 234, 1)",
                    "scaleFontColor": "rgba(214, 216, 224, 1)",
                    "belowLineFillColorGrowing": "rgba(60, 188, 152, 0.05)",
                    "belowLineFillColorFalling": "rgba(255, 74, 104, 0.05)",
                    "symbolActiveColor": "rgba(242, 250, 254, 1)",
                    "tabs": [
                        {
                        "title": "Indices",
                        "symbols": [
                            {
                            "s": "INDEX:SPX",
                            "d": "S&P 500"
                            },
                            {
                            "s": "INDEX:IUXX",
                            "d": "Nasdaq 100"
                            },
                            {
                            "s": "INDEX:DOWI",
                            "d": "Dow 30"
                            },
                            {
                            "s": "INDEX:NKY",
                            "d": "Nikkei 225"
                            },
                            {
                            "s": "INDEX:DAX",
                            "d": "DAX Index"
                            },
                            {
                            "s": "OANDA:UK100GBP",
                            "d": "FTSE 100"
                            }
                        ],
                        "originalTitle": "Indices"
                        },
                        {
                        "title": "Commodities",
                        "symbols": [
                            {
                            "s": "CME_MINI:ES1!",
                            "d": "E-Mini S&P"
                            },
                            {
                            "s": "CME:E61!",
                            "d": "Euro"
                            },
                            {
                            "s": "COMEX:GC1!",
                            "d": "Gold"
                            },
                            {
                            "s": "NYMEX:CL1!",
                            "d": "Crude Oil"
                            },
                            {
                            "s": "NYMEX:NG1!",
                            "d": "Natural Gas"
                            },
                            {
                            "s": "CBOT:ZC1!",
                            "d": "Corn"
                            }
                        ],
                        "originalTitle": "Commodities"
                        },
                        {
                        "title": "Bonds",
                        "symbols": [
                            {
                            "s": "CME:GE1!",
                            "d": "Eurodollar"
                            },
                            {
                            "s": "CBOT:ZB1!",
                            "d": "T-Bond"
                            },
                            {
                            "s": "CBOT:UD1!",
                            "d": "Ultra T-Bond"
                            },
                            {
                            "s": "EUREX:GG1!",
                            "d": "Euro Bund"
                            },
                            {
                            "s": "EUREX:II1!",
                            "d": "Euro BTP"
                            },
                            {
                            "s": "EUREX:HR1!",
                            "d": "Euro BOBL"
                            }
                        ],
                        "originalTitle": "Bonds"
                        },
                        {
                        "title": "Forex",
                        "symbols": [
                            {
                            "s": "FX:EURUSD"
                            },
                            {
                            "s": "FX:GBPUSD"
                            },
                            {
                            "s": "FX:USDJPY"
                            },
                            {
                            "s": "FX:USDCHF"
                            },
                            {
                            "s": "FX:AUDUSD"
                            },
                            {
                            "s": "FX:USDCAD"
                            }
                        ],
                        "originalTitle": "Forex"
                        }
                    ]
                    }
               `}
                </script> 
            </Helmet>
        )
    }
}

Solution 4:

Use the following library:

https://github.com/rafaelklaessen/react-tradingview-widget

import TradingViewWidget, { Themes } from 'react-tradingview-widget';

const App = () => (
  <TradingViewWidget
    symbol="NASDAQ:AAPL"
    theme={Themes.DARK}
    locale="fr"
    autosize
  />
);

Share