CODEWITHSUNDEEP
javascriptreactjs
Ade N
Ade N

Reputation: 145

React - Disable function when browser shrinks

I am trying to disable a onMouseEnter / onMouseLeave event listener when the browser window is shrinking below 600px for instance. My question relates to a similar query Disable a whole function when window size is below 770px. However, I've never used jquery, so I was wondering is there a way to achieve the same thing in React without using jquery.

This is the sample I am working on https://codesandbox.io/s/jovial-rubin-vh2ft?file=/src/App.js:482-494

I would really appreciate any suggestion. Thank you

Upvotes: 0

Views: 33

Answers (1)

Hassan Azzam
Hassan Azzam

Reputation: 331

I just tried this on your project and it worked.

replace your handleMyPhoto method with this:

handleMyPhoto = () => {
    const showPhoto = window.innerWidth < 600 ? false : !this.state.showPhoto;
    this.setState({ showPhoto  });
};

This basically checks if the window width is less than 600px then it sets showPhoto state to false, otherwise it revert the existing state as normal.

Upvotes: 1

Related Questions