Is it possible to load these 2 scripts which renders a widget inside a div and load it as a react component ?
<div id="position-size-calculator-124020">
<script type="text/javascript" src="https://www.cashbackforex.com/Content/remote/remote-widgets.js"></script>
<script type="text/javascript"> RemoteCalc({"Url":"https://www.cashbackforex.com", "TopPaneStyle":"YmFja2dyb3VuZDogcmdiYSg0MCwgNDIsIDQ2KTsgY29sb3I6IHdoaXRlOyBib3JkZXItYm90dG9tOiBub25lOw==","BottomPaneStyle":"YmFja2dyb3VuZDogIzE1MTgxZDsgYm9yZGVyOiBzb2xpZCAwcHggIzJhMmUzOTsgY29sb3I6ICNGRkY=","ButtonStyle":"YmFja2dyb3VuZDogIzM0MzU0MDsgY29sb3I6IHdoaXRlOyBib3JkZXItcmFkaXVzOiAyMHB4OyA=","TitleStyle":"dGV4dC1hbGlnbjogbGVmdDsgZm9udC1zaXplOiA0MHB4OyBmb250LXdlaWdodDogNTAwOyBjb2xvcjogI0ZGRg==","TextboxStyle":"YmFja2dyb3VuZDogIzE1MTgxZDsgY29sb3I6ICNGRkYKOyBib3JkZXI6IHNvbGlkIDBweCAjOTE5NGExOw==","ContainerWidth":"100%","HighlightColor":"rgba(0,0,0,1.0)","IsDisplayTitle":false,"IsShowChartLinks":false,"IsShowEmbedButton":false,"Lang":"en","CompactType":"large","Calculator":"position-size-calculator","ContainerId":"position-size-calculator-124020"});</script>
</div>
2
Answers
In order to integrate the HTML and script elements into a React component, you will need to dynamically load the external script and initialize the widget within the React component’s lifecycle. The React component should manage the loading of the scripts and the rendering of the widget inside a specific
div
.Yes, it is possible to load these scripts into a React component. You can use the useEffect hook in a functional component to load external scripts and initialize them. Above is an example of how you can achieve this.
This component uses the useEffect hook to load the external scripts when the component mounts, and it also removes the script elements when the component unmounts to avoid memory leaks.