title: How can I add a script to a gatsby page that runs on every page load?
body: <p>I'm trying to add a custom masonry script to a single page in Gatsby. It makes modifications to styling properties of <code>&lt;div&gt;</code> elements in a grid layout, but it essentially the script needs to do its thing every time the page is loaded or resized.</p>
  <p>The way I'm trying to accomplish this is via requiring the script in an effect hook in a function returning a React component:</p>
  <pre><code>// in 'page.js'
  export default () =&gt; {
      useEffect(() =&gt; {
          require('./scripts/masonry');
      }
  
      return // blah blah blah...
  }
  </code></pre>
  <p>And in the script, I've put all the things I need the script to do in a function called <code>resizeAll</code> and attached it to <code>window.onloadend</code> and added it to a resize event listener:</p>
  <pre><code>// in the masonry script at the very bottom
  window.onloadend = resizeAll;
  window.addEventListener('resize', resizeAll);
  </code></pre>
  <p>But this doesn't work because the script seems to run only when the page is resized, but not when loading or navigating to the page. My suspicion is that <code>window.onloadend</code> is for some reason broken or clobbered by gatsby's functionality, or that I'm not using it right. Any help would be much appreciated.</p>