NIPEOpen Source

Project detail

React Viewport

Alpha

Reactive React geometry for layout and visual viewports, keyboard occlusion, and safe areas.

Overview

Reactive React geometry for layout and visual viewports, keyboard occlusion, and safe areas.

Why it exists

It exists for React behavior that needs measured viewport geometry or an explicit distinction between layout and visual viewports when CSS alone cannot express it.

Source

Capabilities

  • Separate layout and visual geometry

    Keeps layout and visual viewport coordinate systems separate, with explicit fallback geometry when VisualViewport is unavailable.

    Source

  • Conservative keyboard and safe-area state

    Reports safe-area geometry and infers keyboard occlusion only when focus, zoom, and occlusion thresholds provide conservative evidence.

    Source

  • SSR and CSS-variable support

    Provides an SSR-safe stable server snapshot and an optional hook that installs measured viewport, keyboard, and safe-area CSS variables.

    Source

Limitations

Heuristic and physical-device boundaries

Keyboard inference can miss floating or split keyboards, the alpha makes no universal browser claim, and physical-device QA remains pending.

Source

Example

Example source
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 size: {viewport.visual.width} × {viewport.visual.height}; keyboard:{' '}
      {viewport.keyboard.open ? `${viewport.keyboard.height}px` : 'closed'}
    </p>
  )
}