Created
January 11, 2020 07:44
-
-
Save franky47/321f55497eed657ec7d9652a5c33fcb7 to your computer and use it in GitHub Desktop.
React hook to fix the 100vh issue on mobile Chrome and Safari
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { useWindowSize } from 'react-use'; | |
// 100vh is broken on mobile (Chrome, Safari): | |
// https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html | |
export default function use100vh() { | |
const ref = React.useRef(); | |
const { height } = useWindowSize(); | |
React.useEffect( | |
() => { | |
if (!ref.current) { | |
return; | |
} | |
ref.current.style.height = height + 'px'; | |
}, | |
[height], | |
); | |
return ref; | |
} | |
// -- | |
// Higher-order component (to wrap around styled-components definitions) | |
export const with100vh = Component => ({ children, ...props }) => { | |
const ref = use100vh(); | |
return ( | |
<Component {...props} ref={ref}> | |
{children} | |
</Component> | |
); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment