search

yocontra / react-responsive

CSS media queries in react - for responsive design, and more.
https://contra.io/react-responsive
MIT License
7.04k stars 298 forks source link

not working on window-resizing #271

Closed sagartmg closed 3 years ago

sagartmg commented 3 years ago

while using toggle-device-toolbar in chrome, it does work but while resizing chrome window, it doesnot

// code
// sizes according to bootstrap const isDesktopOrLaptop = useMediaQuery({ minDeviceWidth: 1200 }) const isTablet = useMediaQuery({ maxDeviceWidth: 1199, minDeviceWidth: 768 }) const isMobileDevice = useMediaQuery({ maxDeviceWidth: 767 })

and in render method

Device Test!

            {isDesktopOrLaptop && <p>You are a desktop or laptop</p>}
            {isTablet && <p>You are a tablet or mobile phone</p>}
            {isMobileDevice && <p>mobile mobile phone</p>}

works while using chrome toggle device toolbar chrome_kh8Fdz0epu

doesnot works while doing simple window resizing. chrome_ywI5MzCfOw

sagartmg commented 3 years ago

fixed using minWidth instted of minDeviceWidth in const isDesktopOrLaptop = useMediaQuery({ minDeviceWidth: 1200 }) const isTablet = useMediaQuery({ maxDeviceWidth: 1199, minDeviceWidth: 768 }) const isMobileDevice = useMediaQuery({ maxDeviceWidth: 767 })