Description:
A JavaScript library for React that provides a <Div100vh> React component and <use100vh> hook that helps developers avoid cropping at the bottom of a fullscreen page in mobile browsers.
Learn more about the 100vh issue: Viewport height is taller than the visible part of the document in some mobile browsers
Install and Import:
// Component
import Div100vh from 'react-div-100vh'
// Hook
import { use100vh } from 'react-div-100vh'Basic Usage:
// Component
const MyFullHeightComponent = () => (
<Div100vh>
<marquee>Look ma, no crop!</marquee>
</Div100vh>
)
// Hook
const MyHalfHeightExampleComponent = ({ children }) => {
const height = use100vh()
const halfHeight = height ? height / 2 : '50vh'
return <div style={{ height: halfHeight }}>{children}</div>
}Preview:
