How to capture document.ready or window.load events in Gatsby

Question

I am relatively new to the Gatbsy framework and I am trying to figure out a way to toggle classes on some elements on DOMContentLoaded or on window.load, to animate them as soon as the user can see the screen.

This is what I did until now however it doesn't seem very appropriate:

componentDidMount = () => {
  if (typeof window === "undefined") return
  window.addEventListener("load", this.myEventHandler)
  // or
  if (typeof document === "undefined") return
  document.addEventListener("DOMContentLoaded", this.myEventHandler)
}

Is there a better way of doing this?

Thank you in advance.

Answer 1

I think you should add these event listeners in the gatsby-browser.js:

// gatsby-browser.js
// ES6
export const onClientEntry = () => {
  window.onload = () => { /* do stuff */ }
}

// or commonjs
exports.onClientEntry = () => {
  window.onload = () => { /* do stuff */ }
}

You don't have to check for window there because this file is only run on the client side. Here's the full list of available hooks.

also AFAIK document doesn't have a ready event, it's a jQuery thing. You might be interested in DOMContentLoaded event, though there's some small different between that and jQuery's ready IIRC.