react-domcontentloaded

A react component that inserts WebReflection's DOMContentLoaded fix for async scripts

Usage no npm install needed!

<script type="module">
  import reactDomcontentloaded from 'https://cdn.skypack.dev/react-domcontentloaded';
</script>

README

react-domcontentloaded

A react component that inserts WebReflection's DOMContentLoaded fix for async scripts.

Read this blog post for details about how you might be bitten by using the DOMContentLoaded event in conjunction with <script async …>: http://webreflection.blogspot.no/2014/02/the-underestimated-problem-about-script.html

Please note: This component ONLY make sense for server side rendering, e.g. using ReactDOM.renderToStaticMarkup or ReactDOM.renderToString.

Usage

var DOMContentLoadedFix = require('react-domcontentloaded')

var Chrome =  React.createClass({
  render() {
    return (
      <html>
        <head>
          <DOMContentLoadedFix/>
          <title>My Page title</title>
          <script src="/my/fancy-js.js" async/>
        </head>
        <body>
          {/* … */}
        </body>
      </html>
    )
  }
})