Async loading script within react component

Question

I have a problem loading external script within react JSX

<script>
    (function(d) {
        var config = {
                kitId: 1234567,
                scriptTimeout: 3000,
                async: true
            },
            h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
    })(document);
</script>

and here is my render function where i would like to have the javascipt load asyn, it's super easy in a html file, however i am stunned within a react component on how to do acheive. (If i can avoid install another external module would be best). Many thanks

render() {
    return (
        <head>
            //Script to load asyn
        </head>
    )
}

What you're trying to do won't work. Instead try one of the following strategies inside componentDidMount() stackoverflow.com/questions/13121948/… — azium
– azium, Commented Jan 13, 2016 at 6:44
Yeah, I'm not clear on what you're trying to do. Can you provide a fiddle with your implementation that doesn't work? — Josh David Miller
– Josh David Miller, Commented Jan 13, 2016 at 6:49

Patrick Lee Scott · Accepted Answer · 2016-02-08 16:31:25Z

My server renders the initial HTML document, so I couldn't just insert it into the head as @mjhm suggested. Using @bluebill1049's answer I was able to make use of ES6 Template Strings and react's dangerouslySetInnerHTML

import React, {Component} from 'react';

export default class Html extends Component {

  render() {
    const loadTypeKit = `
      (function(d) {

        var config = {
            kitId: 'YOUR_KITID', 
            scriptTimeout: 3000, 
            async: true
          },
          h=d.documentElement,
          t=setTimeout(function() {
            h.className=h.className.replace(/wf-loading/g,"")+" wf-inactive";
          },config.scriptTimeout),
          tk=d.createElement("script"),
          f=false,
          s=d.getElementsByTagName("script")[0],
          a;

        h.className+=" wf-loading";
        tk.src='https://use.typekit.net/'+config.kitId+'.js';
        tk.async=true;
        tk.onload=tk.onreadystatechange=function() {
          a=this.readyState;
          if(f||a&&a!="complete"&&a!="loaded") return;
          f=true;
          clearTimeout(t);
          try{
            Typekit.load(config)
          } catch(e){ }
        };
        s.parentNode.insertBefore(tk,s);

      })(document);
      `;

    return (
      <html>
      <head>
        <script dangerouslySetInnerHTML={{__html: loadTypeKit}} />
      </head>
      <body>
          ...
      </body>
      </html>
    );
  }
}

Bill · Accepted Answer · 2016-01-25 04:46:24Z

1

dangerouslySetInnerHTML is the solution i have found.

https://facebook.github.io/react/tips/dangerously-set-inner-html.html

This allow you to have script tag and insert JavaScript in side of jSX.

answered Jan 25, 2016 at 4:46

Bill

19.5k21 gold badges89 silver badges135 bronze badges

1 Comment

Souvik Ghosh Over a year ago

It would have been great if you updated your specific code example with the actual solution you used. Thanks for the pointer anyways.

Collectives™ on Stack Overflow

Async loading script within react component

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related