useViewport
Read the current viewport
{ width, height, breakpoint } from one shared, hydration-safe store, re-rendering on every resize. Reach for useBreakpoint instead when only the breakpoint matters.useViewport() takes no arguments and returns { width, height, breakpoint }: the window size in px (dp on native) and the breakpoint that width falls in, from theme.breakpoints or the nearest BreakpointProvider override. Every consumer shares one listener (a resize handler coalesced to one update per animation frame on web, Dimensions change on native) that attaches with the first subscriber and detaches with the last. Static rendering and the hydration pass see a desktop default (1200 × 800, xl), then the real size, so markup never mismatches. It re-renders on every size change; useBreakpoint() re-renders only when the breakpoint changes.Loading demo…
import { Badge, Row, Text, useViewport } from '@plocks/ui';
export function Demo() {
const { width, height, breakpoint } = useViewport();
return (
<Row gap="sm" align="center">
<Text size="xl" fw="700">
{Math.round(width)} × {Math.round(height)}
</Text>
<Badge size="lg">{breakpoint}</Badge>
</Row>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources