useElementSize
Track an element's rendered width and height through
onLayout, on web and native, to size children or switch layouts by the space a component actually has rather than the window.Resize the window to watch the box's own size update.
useElementSize() returns { width, height, measured, onLayout }: pass onLayout to the element to measure. measured is false until the first layout event, while width and height are still 0.On the web React Native Web backs
onLayout with a ResizeObserver, so the size follows the element, not just the window. The returned object keeps its identity until the size changes. To also run your own onLayout, call both from one handler.Loading demo…
import { Block, Text, useElementSize } from '@plocks/ui';
export function Demo() {
const { width, height, onLayout } = useElementSize();
return (
<Block fullWidth onLayout={onLayout} bg="surface" p="xl" radius="md" align="center">
<Text size="lg" fw="600">
{Math.round(width)} × {Math.round(height)}
</Text>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources