MeasuredBox

A <Box> whose children render only after the outer box's size has been measured. Solves the "width=0 sentinel flash" you hit when content needs to know its own host width before it can size itself.

Import

import { MeasuredBox } from "silvery"

Usage

<MeasuredBox width="100%" flexDirection="column" alignItems="center">
  {({ width }) => <Banner availableWidth={width} />}
</MeasuredBox>

The render-prop children receive the measured rect as { width, height } and are not invoked until measurement is available — eliminating the empty-frame flash that the hand-rolled useBoxRect() + width > 0 ? <Inner /> : null pattern produces.

Props

Prop	Type	Description
children	(rect: { width, height }) => ReactNode | ReactNode	Render-prop function, or plain ReactNode (deferred until measured)
all <Box> props	see Box	Pass-through to the outer measured Box

Sizing

MeasuredBox is a <Box> — it sizes by the same flex rules. To produce a non-zero width:

• Pass an explicit width (number or "100%").
• Use flexGrow={1} so the box stretches into available space.
• Rely on the parent's default cross-axis stretch (when the parent uses alignItems="stretch", the silvery default).

Catch-22 to avoid

A MeasuredBox with auto width inside a parent that uses alignItems="center" collapses to zero with no children — and zero-width never flips to non-zero, so the children never render. Either pass width="100%" (resolves against the parent's definite cross-axis size) or give the box an explicit width.

Plain ReactNode children

If you pass plain children instead of a render function, they are deferred until measurement is available and then rendered as-is — useful when the children handle their own measurement and you only need to gate on "measured at all":

<MeasuredBox width="100%">
  <ContentThatMeasuresItself />
</MeasuredBox>

See also

• useBoxRect — the underlying hook
• <Box> — the layout primitive MeasuredBox wraps