Examples

Prefer CSS for layout. Add measured React state only where behavior needs coordinates CSS cannot expose.

CSS-variable composer

This real input stays above measured keyboard occlusion and the safe-area inset. The library changes variables; CSS performs the positioning.

Position from the measured edge

useViewportCssVariables() updates the target directly. The composer combines keyboard height and safe-area bottom in CSS.

CSS positioning recipe

.composer {
  position: fixed;
  right: max(1rem, var(--react-viewport-safe-area-right, 0px));
  bottom: calc(
    var(--react-viewport-keyboard-height, 0px) +
      max(1rem, var(--react-viewport-safe-area-bottom, 0px))
  );
  left: max(1rem, var(--react-viewport-safe-area-left, 0px));
}

When CSS is enough

Use dvh, svh, and lvh for viewport sizing.

Use env(safe-area-inset-*) for protected-edge padding.

Use media and container queries for responsive layout. This package is not a breakpoint or device-detection utility.