useLayoutBox

Read as Markdown

import { useLayoutBox, Rectangle } from "@pibbl/core";

useLayoutBox() returns a readonly LayoutBox and is render-only, returning the stable allocation supplied by the current layout parent. It schedules no work and does not measure. Read it during render to adapt local drawing, rather than retaining it beyond the current render.

function FillAllocation() {
  const { width, height } = useLayoutBox();
  return <Rectangle style={{ width, height, fill: "#2563eb" }} />;
}

Try the Flex live example.

API details from source

Returns the current stable child-local allocation without scheduling work.

useLayoutBox: () => Readonly<LayoutBox>

Related API: useLayoutBox, LayoutBox.

Returns

The current parent-assigned layout box in logical coordinates. See LayoutBox.

See also

LayoutBox

View source — packages/core/src/lib/hooks/use-layout-box.ts:11

Implementation guidance for agents

Read the Drawing, layout, and effects companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.

Complete minimal examples

• Allocated layout box: Read the current canvas allocation and draw an inset panel. Plain source

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 380919b. ALPHA — NOT FOR PRODUCTION USE.