useLinePath

Read as Markdown

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.

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

See the Line live example.

API details from source

Creates a memoized Path2D for a set of line coordinates.

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

Related API: useLinePath.

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

createLinePath

View source — packages/core/src/lib/hooks/use-line-path.ts:14

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.