ilokesto

Measure

Measure observes its container with ResizeObserver and passes the current { width, height } to a render prop. Forwards ref to the underlying div.

import { Measure } from '@ilokesto/utilinent';

<Measure>{({ width, height }) => <span>{width}×{height}</span>}</Measure>

Props

PropTypeDescription
childrenReactNode | ({ width, height }) => ReactNodeContent, optionally receiving the size.
boxResizeObserverBoxOptionsObserver box model. Defaults to content-box.
initialSizeDOMRectReadOnlyInitial size before the first observation fires.

All standard div props and ref are forwarded to the observed element.

On this page