# useLinePath

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

`useLinePath(coords, { closePath? }?)` is render-only and memoizes a fresh
numeric line path while its flattened coordinates and close flag are unchanged.
It has no separate cleanup; normal component slot teardown owns the memo.

```tsx
function Sparkline() {
  const path = useLinePath([
    [0, 24],
    [30, 8],
    [60, 18],
  ]);
  return <Path style={{ d: path, stroke: "#2563eb" }} />;
}
```

See the [Line live example](/playground/#/examples/drawing/line).

## API details from source

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

Creates a memoized Path2D for a set of line coordinates.

```ts
useLinePath: (coords: [number, number][], config?: { closePath?: boolean; }) => Path2D
```

Related API: [useLinePath](/reference/hooks/use-line-path/).

### Parameters

- **`coords`** — Ordered horizontal and vertical coordinate pairs.

- **`config`** — Whether to close the path by connecting its last vertex to its first.

### Returns

A memoized Path2D

### See also

[LinePathOptions](/reference/types/elements-components/#linepathoptions)

[createLinePath](/reference/functions/create-line-path/)

[View source — packages/core/src/lib/hooks/use-line-path.ts:14](/source/packages/core/src/lib/hooks/use-line-path-ts/#L14)

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