title: How to embed external js code into React component
body: <p>I am working in a project, where I have to use a widget_api code provided by <strong><a href="https://stat.ripe.net/docs/widget_api" rel="nofollow noreferrer">RIPE Stat</a></strong>, to integrate the graphical widget into a React component.
  For example in HTML5, I would have done it like this, and it works fine.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;fr&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Widget&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      
      &lt;script src=&quot;https://stat.ripe.net/widgets/widget_api.js&quot;&gt;&lt;/script&gt;
      &lt;div class=&quot;statwdgtauto&quot;&gt;
          &lt;script&gt;
              ripestat.init(&quot;rir-geo&quot;,{&quot;resource&quot;:&quot;80.12.67.0/24&quot;},null,{&quot;size&quot;:&quot;500&quot;,&quot;disable&quot;:[&quot;controls&quot;]})
          &lt;/script&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>While doing research I found this <strong><a href="https://www.npmjs.com/package/react-safe" rel="nofollow noreferrer">react-safe</a></strong> library which allows to do the same thing in React</p>
  <p>Here is the code of my index file.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;link rel=&quot;icon&quot; href=&quot;%PUBLIC_URL%/favicon.png&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
      &lt;meta name=&quot;theme-color&quot; content=&quot;#000000&quot; /&gt;
      &lt;meta
        name=&quot;description&quot;
        content=&quot;Web site created using create-react-app&quot;
      /&gt;
     
      &lt;link rel=&quot;manifest&quot; href=&quot;%PUBLIC_URL%/manifest.json&quot; /&gt;
      &lt;title&gt;MyWHOIS&lt;/title&gt;
      &lt;link href=&quot;https://fonts.googleapis.com/icon?family=Material+Icons&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;/head&gt;
    &lt;body class=&quot;bd-home&quot;&gt;
      &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
      &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
      &lt;script src=&quot;./js/polyfill.js&quot; defer &gt;&lt;/script&gt;
      &lt;script src=&quot;https://stat.ripe.net/widgets/widget_api.js&quot; async&gt;&lt;/script&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>And the component that I created for...</p>
  <pre><code>import React, { Component } from 'react';
  import Safe from &quot;react-safe&quot;;
  
  export default class EmbedComponent extends Component {
      constructor(props){
          super();
          /*
          const widget_api = document.createElement(&quot;script&quot;);
          widget_api.src = &quot;https://stat.ripe.net/widgets/widget_api.js&quot;;
          widget_api.async = true;
      
          document.body.appendChild(widget_api);
         */
      }
  
      render() {
          const params1 = {&quot;family&quot;:4,&quot;warnings&quot;:1,&quot;delegated&quot;:1,&quot;resource&quot;:&quot;FR&quot;};
          const params2 ={&quot;resource&quot;:&quot;127.0.0.1/24&quot;};
          const control = {&quot;size&quot;:&quot;500&quot;,&quot;disable&quot;:[&quot;controls&quot;]};
          return (
              &lt;div&gt;
                  &lt;h4&gt;Include Embed&lt;/h4&gt;
                  &lt;div className=&quot;statwdgtauto&quot;&gt;
                      &lt;Safe.script&gt;
                          {`ripestat.init(&quot;rpki-by-country&quot;,${params1},null,${control})`}
                      &lt;/Safe.script&gt;
                      &lt;Safe.script&gt;
                          {`ripestat.init(&quot;rir-geo&quot;,${params2},null,${control})`}
                      &lt;/Safe.script&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  <p>I have errors, when I include the file with the  tag with async or defer, I have a cors error</p>
  <blockquote>
  <p>A parser-blocking, cross site (i.e. different eTLD+1) script, , is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See  for more details.</p>
  </blockquote>
  <p>And without defer or async I have this problem of writing on the document</p>
  <blockquote>
  <p>Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. widget_api.js:90</p>
  </blockquote>