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 ponents 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?

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 ponents 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?

• javascript
• gatsby

• reactjs/tutorial/… – ksav Commented Jul 25, 2019 at 6:20

3 Answers 3

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

You can use the React cyclelife with ponentDidMount().

This need to update your ponent like that :

import React from 'react'

class YourComponent extends React.Component {
    ponentDidMount() {
        // Your Javascript function here
    }

    render() {
        return(
            <div className="YourComponentHere"></div>
        )
    }
}

export default YourComponent

Hope that help you!

If your ponent is a functional ponent, try using React Hook useEffect, which will guarantee the execution after the ponent is rendered.

import React, { useEffect } from 'react'

const MyComponent = () => {

    useEffect(() => {
        console.log("Document loaded");
    });

    return (
        <main>
          <text>Pretty much the ponent's body code around here</text>
        </main>
    )
}

export default MyComponent