skip to Main Content

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


  1. 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.

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search