# useRectPath

```ts
import { useEventTarget, useRectPath, Path } from "@pibbl/core";
```

`useRectPath(x, y, width, height, config?)` is render-only. It memoizes a
numeric rectangle path using its geometry and resolved numeric radii; optional
pixel-grid alignment incorporates `lineWidth`. It has no separate cleanup and
must be called in stable hook order.

Its numeric rounding fields follow [`RoundedCornerPathOptions`](/reference/types/elements-components/#roundedcornerpathoptions), and its alignment uses [`PixelGridAlignment`](/reference/types/styles/#pixelgridalignment).

```tsx
function Button() {
  const path = useRectPath(0, 0, 140, 40, { cornerRadius: 8 });
  useEventTarget({ onClick: () => undefined }, { path, fill: true });
  return <Path style={{ d: path, fill: "#2563eb" }} />;
}
```

See the [Rectangle live example](/playground/#/examples/drawing/rectangle).

## API details from source

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

Creates a memoized Path2D for a rectangle. Useful when
defining events efficiently.

```ts
useRectPath: (x: number, y: number, width: number, height: number, config?: { alignToPixelGrid?: PixelGridAlignment; lineWidth?: number; cornerRadius?: number; cornerRadii?: readonly (number | null | undefined)[]; }) => Path2D
```

Related API: [useRectPath](/reference/hooks/use-rect-path/), [PixelGridAlignment](/reference/types/styles/#pixelgridalignment).

### Parameters

- **`x`** — Horizontal rectangle origin.

- **`y`** — Vertical rectangle origin.

- **`width`** — Horizontal extent in logical units.

- **`height`** — Vertical extent in logical units.

- **`config`** — Pixel alignment, stroke width, and uniform or per-corner rounding. See
[PixelGridAlignment](/reference/types/styles/#pixelgridalignment) .

### Returns

A memoized Path2D

### See also

[PixelGridAlignment](/reference/types/styles/#pixelgridalignment)

[View source — packages/core/src/lib/hooks/use-rect-path.ts:20](/source/packages/core/src/lib/hooks/use-rect-path-ts/#L20)

## 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

- [Memoized hit paths](/minimal-examples/events/paths/): Rectangle, line, and SVG path hooks define three independent geometric click targets. [Plain source](/minimal/events/paths.tsx)
## Documentation version

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