useSvgPath

Read as Markdown

import { useSvgPath, Path } from "@pibbl/core";

useSvgPath(svgPathData) is render-only and memoizes a browser-parsed Path2D until the path-data string changes. It has no separate cleanup, and browser Path2D parsing behavior remains authoritative.

function Mark() {
  const path = useSvgPath("M10 10h90v60H10z");
  return <Path style={{ d: path, fill: "#38bdf8" }} />;
}

See the SVG path live example.

API details from source

Creates a memoized Path2D for an SVG data string.

useSvgPath: (svgPathData: string) => Path2D

Related API: useSvgPath.

Parameters

• svgPathData — SVG path data to parse and memoize.

Returns

A memoized Path2D

See also

SvgPathOptions

createSvgPath

View source — packages/core/src/lib/hooks/use-svg-path.ts:13

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.