Layout viewport
The page’s layout space: window.innerWidth and window.innerHeight.
Viewport geometry you can reason about.
Read the layout viewport, visual viewport, keyboard occlusion, and safe area as one typed React state—without pretending they are one rectangle.
- Runtime dependencies
- 0
- Server import
- Safe
- Status
- Alpha
One screen, four measured regions
Layout, visual viewport, keyboard occlusion, and safe area stay separate. The drawing is a coordinate plane, not a device mockup.
- Layout viewport
- Pending
- Visual viewport
- Pending
- Safe area
- Pending
- Bottom occlusion
- Pending
- Keyboard occlusion
- PendingNo keyboard inferred
Bottom occlusion
layoutHeight - (visualOffsetTop + visualHeight)Measure only when CSS stops being enough
Use dynamic viewport units and environment insets first. Reach for JavaScript when interface behavior needs measured geometry.
npm install @nipe-solutions/react-viewport
import { useViewport } from '@nipe-solutions/react-viewport'
export function ViewportReadout() {
const viewport = useViewport()
if (!viewport.ready || viewport.visual === null) {
return <p>Measuring viewport…</p>
}
return (
<p>
Visible: {viewport.visual.width} × {viewport.visual.height}
</p>
)
}Keep the coordinate systems separate
A browser can lay out one rectangle while showing only part of it. That distinction is the center of the API, not an implementation detail.
Visual viewport
The visible region, including its layout-relative offsets, page coordinates, and zoom scale.
Keyboard and safe area
Occlusion and protected-edge measurements remain independent, so your interface can combine them deliberately.