How to run JavaScript code in Gatsby only after rendering DOM

Where's the right place to put code that interacts with the DOM in a gatsby site? I want to toggle the visibility of some components by adding/removing a class when another element is clicked.

The gatsby-browser.js file seems like it should contain this code but the API doesn't seem to call any of the functions after the DOM has loaded.

Similarly, using Helmet calls it too soon. Using window.onload never seems to trigger at all regardless of where it's included.

window.onload = function () {
  // add event listener to the toggle control
}

Is there an event I can use to run my code when the DOM is ready?

Solution

Do you really need to wait for the DOM to be ready? When working in react you need to change the way you think about these things. For example you could add an on click that changes state and then reflect the state change in your classname prop.

Code Example:

import React, { useState } from "react"

const MyApp = () => {
  const [visible, setVisible] = useState(true) // true is the initial state

  return (
    <div>
      <div className={visible ? "visible-class" : "hidden-class"}>
        My content
      </div>
      <button onClick={() => setVisible(!visible)}>Click me!</button>
    </div>
  )
}

export default MyApp

Or you could take it a step further and not even render that content to the DOM until you want to.

Example:

import React, { useState } from "react"

const MyApp = () => {
  const [visible, setVisible] = useState(true) // true is the inital state

  return (
    <div>
      <button onClick={() => setVisible(!visible)}>Click me!</button>
      {visible && <div>My content here</div>}
    </div>
  )
}

export default MyApp