How do I load a remote script (widget) inside a react component

Question

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>

Answer 1

import React, { useEffect } from 'react';

const PositionSizeCalculator = () => {
  useEffect(() => {
    // Create a script element
    const script = document.createElement('script');

    // Set the script source to the remote-widgets.js file
    script.src = 'https://www.cashbackforex.com/Content/remote/remote-widgets.js';
    script.async = true;

    // Append the script to the document body
    document.body.appendChild(script);

    // Load the RemoteCalc script after the remote-widgets.js has loaded
    script.onload = () => {
      const remoteCalcScript = document.createElement('script');
      remoteCalcScript.text = `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"});`;
      
      // Append the RemoteCalc script to the document body
      document.body.appendChild(remoteCalcScript);
    };

    // Cleanup: Remove the script elements when the component unmounts
    return () => {
      document.body.removeChild(script);
    };
  }, []); // The empty dependency array ensures that this effect runs once on component mount

  return <div id="position-size-calculator-124020"></div>;
};

export default PositionSizeCalculator;

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.