Javascript Question posted in
A very good W3school tutorial can be found here.

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

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>
Tags:

2

Answers


  1. 0

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