useRectPath

Read as Markdown

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, and its alignment uses PixelGridAlignment.

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.

API details from source

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

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, 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 .

Returns

A memoized Path2D

See also

PixelGridAlignment

View source — packages/core/src/lib/hooks/use-rect-path.ts:20

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

• Memoized hit paths: Rectangle, line, and SVG path hooks define three independent geometric click targets. Plain source

Documentation version

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