zero-fucks-given/packages/hooks/src/useViewport/Readme.md

useViewport

Returns the current viewport dimensions [height, width] and updates them on window resize.

Signature

function useViewport(): [number, number];

Returns a tuple [height, width] in pixels.

Usage

function ResponsiveCanvas() {
  const [height, width] = useViewport();

  return <canvas height={height} width={width} />;
}

// Destructure with descriptive names
const [viewportHeight, viewportWidth] = useViewport();

Notes

• Reads window.innerHeight and window.innerWidth — includes the scrollbar area.
• Initialized from the current window size, so there is no flash to [0, 0].
• Client-only ('use client'). Will throw during SSR if accessed before mount — pair with useMounted if SSR is a concern.