useElementSize

An element's size, kept current with a ResizeObserver.

HooksLayout@gaudi/design-system/hooks/layout/use-element-sizeView in Storybook Source

Measures the border box and follows resizes, for container-driven layouts, truncation and drawing at real pixel sizes. Returns a callback ref and the size; onResize receives each size without a render.

Usage

import { useElementSize } from '@gaudi/design-system/hooks';
const [ref, { width }] = useElementSize();<div ref={ref}>{width < 480 ? <CompactCard /> : <WideCard />}</div>

Examples

Layout from the container width

Storybook

API

3 options

2 return values

Accessibility

Size-driven layouts must still reflow at 400% zoom and keep reading order; prefer CSS container queries when only styles change.

Notes

Charts measure themselves; use this for your own canvases and layouts.

useCollapsibleSectionsExpanded state for several sections, with expand all and collapse all.useInViewWhether an element is in the viewport, from an IntersectionObserver.useScrollPositionThe vertical scroll offset of the page or a scroll container.