Skip to main content

​
Overview

The useViewport hook returns the container dimensions provided by the host. This is useful for creating responsive layouts based on the actual available space.
For most resources, use the <SafeArea> component instead — it applies both safe area padding and viewport height constraints automatically.

​
Import

import { useViewport } from 'sunpeak';

​
Signature

function useViewport(): Viewport | null

​
Returns

​
return
Viewport | null
Container dimensions, or null if unavailable.
{
  width: number;
  height: number;
  maxHeight?: number;
}

​
Usage

import { useViewport } from 'sunpeak';

function MyResource() {
  const viewport = useViewport();

  if (!viewport) return null;

  return (
    <div style={{ maxWidth: viewport.width }}>
      Container: {viewport.width}x{viewport.height}
    </div>
  );
}