# useLayoutBox

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

`useLayoutBox()` returns a readonly [`LayoutBox`](/reference/types/layout/#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.

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

Try the [Flex live example](/playground/#/examples/layout/flex).

## API details from source

<span id="api-useLayoutBox"></span>

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

```ts
useLayoutBox: () => Readonly<LayoutBox>
```

Related API: [useLayoutBox](/reference/hooks/use-layout-box/), [LayoutBox](/reference/types/layout/#layoutbox).

### Returns

The current parent-assigned layout box in logical coordinates. See [LayoutBox](/reference/types/layout/#layoutbox).

### See also

[LayoutBox](/reference/types/layout/#layoutbox)

[View source — packages/core/src/lib/hooks/use-layout-box.ts:11](/source/packages/core/src/lib/hooks/use-layout-box-ts/#L11)

## Implementation guidance for agents

Read the [Drawing, layout, and effects companion](/agents/topics/layout/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Allocated layout box](/minimal-examples/layout/layout-box/): Read the current canvas allocation and draw an inset panel. [Plain source](/minimal/layout/layout-box.tsx)
## Documentation version

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