React Component & Hook For 100vh Issue In Mobile Browsers

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: