How to get React App change content on the screen when screen width changes

Question

I have certain components in my React project which will render only for mobile devices.

I have set it up like this -

const LandingPage = (props) => {
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    window.screen.width <= 760 ? setIsMobile(true) : setIsMobile(false);
  }, [window.screen.width]);

   **...Components render here**
}

The problem with this is that I get the desired results when I reduce the screen width only after I refresh the page. But I want it to do it automatically when the breakpoint reaches.

How do I achieve that?

Thanks in advance.

I had a similar issue and solved with the answers here: https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs — Ozgur Sar, Nov 19 '20 at 07:26

Juha Kangas · Answer 1 · 2020-11-19T07:44:35.617

2

You can use window.onresize to detect the window size change and then compare the value with window.innerWidth

const LandingPage = (props) => {
    
    const [isMobile, setIsMobile] = useState(false);

    useEffect(() => {
      window.screen.width <= 760 ? setIsMobile(true) : setIsMobile(false);
    }, [window.screen.width]);

    function detectWindowSize() {
        window.innerWidth <= 760 ? setIsMobile(true) : setIsMobile(false);        
    }
    
    window.onresize = detectWindowSize;

    console.log(isMobile)

     return(
         <div>

         </div>
     )
}

edited Nov 19 '20 at 07:44

answered Nov 19 '20 at 07:25

Juha Kangas

728
5
8

I tried this and my app doesn't load after I add this code. It's just a blank white screen showing – vaibhav deep Nov 19 '20 at 07:33
After I add it in `useEffect()` it's the same behavior as before – vaibhav deep Nov 19 '20 at 07:39
You need to put it outside of the useEffect. I edited the code – Juha Kangas Nov 19 '20 at 07:47
thanks, I was doing this `window.onresize = detectWindowSize()`. That was causing the problem – vaibhav deep Nov 19 '20 at 07:59

score 0 · Answer 2 · answered Nov 19 '20 at 07:25

You'd wanna make that decision for the user on the page load by checking whether they're visiting from a mobile device or a desktop device.

loading in mobile components on the desktop when the screen resolution changes is not the best way, as it's a very limited use case. Not a lot of desktop users will ever pull their window that small when using your webapp. But you can absolutely account for it using CSS as a fallback while serving up mobile views and components to mobile users only.

How to get React App change content on the screen when screen width changes

2 Answers2