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:
Download Details:
Author: mvasin
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/mvasin/react-div-100vh
License: MIT