useBreakpoint
Get the current breakpoint name (
base, xs, sm, md, lg or xl) from the theme's breakpoint table, re-rendering only when the viewport crosses a breakpoint rather than on every resize.useBreakpoint() returns a Breakpoint: base below xs, then xs (480), sm (576), md (768), lg (992) and xl (1200) by default. The widths come from theme.breakpoints; wrap a subtree in <BreakpointProvider breakpoints={{ md: 900 }}> to override some of them there. resolveResponsiveValue(value, breakpoint) picks the entry of a { base, sm, … } map defined at or nearest below the current breakpoint, and parses the result as a px number. Breakpoints follow the window, not the preview container, and static rendering assumes xl until hydration.Loading demo…
import { Badge, Block, Row, resolveResponsiveValue, useBreakpoint } from '@plocks/ui';
export function Demo() {
const breakpoint = useBreakpoint();
const columns = resolveResponsiveValue({ base: 1, sm: 2, md: 3, lg: 4 }, breakpoint);
return (
<Block fullWidth align="flex-start">
<Badge size="lg">{breakpoint}</Badge>
<Row gap="sm" w="full">
{Array.from({ length: columns }, (_, i) => (
<Block key={i} grow h={56} radius="md" bg="primary" />
))}
</Row>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources