How to window.addEventListener in React JS

Question

I am trying to figure out how to implement window.addEventListener in React. I'm developing a website with Gatsby and in "development" environment it works but whenever I start in production it gets an error. This is my code:

const checkHeader = () => { 
    // Detect scroll position
    let viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    if (viewportWidth > 1100) {
        let scrollPosition = Math.round(window.scrollY);

        if (scrollPosition > 100){
            document.querySelector('#nav').classList.add(`${headerStyles.sticky}`);
        }
        else {
            document.querySelector('#nav').classList.remove(`${headerStyles.sticky}`);
        }

    } else {

    }
};

// Run the checkHeader function every time you scroll
window.addEventListener('scroll', checkHeader);

I want to apply a class when Scroll. I've checked that I can't use "window." in React. How is the way to implement this code in React?

Also if u r using react.. there are chances your applied class suddenly disappears when DOM re-renders. You should modify the state in the eventlistener and set the class based on the state varaible in the rendeer. — Panther
– Panther, Commented May 9, 2020 at 10:33
usehooks.com/useOnScreen - Create an Intersection observer React Hook :) — Oliver Heward
– Oliver Heward, Commented May 11, 2020 at 9:10

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

During development, react components are only run in the browser where window is defined. When building, Gatsby renders these components on the server where window is not defined.

Generally with React, the solution is to only access window in componentDidMount or to check that window exists before accessing it.

const checkHeader = () => { 
    // Detect scroll position
    let viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    if (viewportWidth > 1100) {
        let scrollPosition = Math.round(window.scrollY);

        if (scrollPosition > 100){
            document.querySelector('#nav').classList.add(`${headerStyles.sticky}`);
        }
        else {
            document.querySelector('#nav').classList.remove(`${headerStyles.sticky}`);
        }

    } else {

    }
};

// Check that window exists before accessing it
if (typeof window !== 'undefined') {
    // Run the checkHeader function every time you scroll
    window.addEventListener('scroll', checkHeader);
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 9, 2020 at 10:34

ksav

20.9k6 gold badges52 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JFelix Over a year ago

just missing the if statement, thank you! it works! really appreciate!

Zaif Warm Over a year ago

Is it a right way to use querySelector in reactjs? @ksav

Shubham Khatri · Accepted Answer · 2020-05-09 10:58:52Z

1

You can directly add window events with Gatsby since it performs server side rendering. To do that you need to add you listeners in gatsby-browser.js inside onClientEntry method which is called when client is loaded

// gatsby-browser.js
// ES6


const checkHeader = () => { 
    // Detect scroll position
    let viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    if (viewportWidth > 1100) {
        let scrollPosition = Math.round(window.scrollY);

        if (scrollPosition > 100){
            document.querySelector('#nav').classList.add(`${headerStyles.sticky}`);
        }
        else {
            document.querySelector('#nav').classList.remove(`${headerStyles.sticky}`);
        }

    } else {

    }
};


export const onClientEntry = () => {
   // Run the checkHeader function every time you scroll
   window.addEventListener('scroll', checkHeader);
}

edited May 9, 2020 at 10:58

answered May 9, 2020 at 10:34

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

3 Comments

JFelix Over a year ago

Hi Shubham, I am starting with Gatsby and I will check the gastby-browser method! any resource to learn about? thank you for your time!

Shubham Khatri Over a year ago

gatsbyjs.org/docs/browser-apis/#onClientEntry. This is the right way to go instead of adding an if condition

JFelix Over a year ago

Ok, I must change my site structure theme. Never work with gatby-browser before! thanks :)

Vishnu · Accepted Answer · 2020-05-09 10:44:21Z

0

Calling the function on did mount of the root component might solve your issue. for example:

// your entry component
const App = () => {

  React.useEffect(() => { // Will be called after mounting the componnent.
    onClientEntry();
  }, []);

  return (
    <Home />
  );
}

Hope this helps

answered May 9, 2020 at 10:44

Vishnu

1,7311 gold badge17 silver badges28 bronze badges

1 Comment

JFelix Over a year ago

thanks Vishnu for your response. I will check this method too, thank you for your time ;)

Collectives™ on Stack Overflow

How to window.addEventListener in React JS

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related