# Memoized hit paths
Rectangle, line, and SVG path hooks define three independent geometric click targets.

## APIs demonstrated

- [useRectPath](/reference/hooks/use-rect-path/) from `@pibbl/core`
- [useLinePath](/reference/hooks/use-line-path/) from `@pibbl/core`
- [useSvgPath](/reference/hooks/use-svg-path/) from `@pibbl/core`
- [PixelGridAlignment](/reference/types/styles/) from `@pibbl/core`

## Complete example

[Plain source](/minimal/events/paths.tsx). Run as a browser module after the document body exists. TSX uses `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`.

```tsx
import {
  Path,
  pibbl,
  useEventTarget,
  useLinePath,
  useRectPath,
  useSvgPath,
  type PixelGridAlignment,
} from '@pibbl/core';

const canvas = document.createElement('canvas');
canvas.width = 340;
canvas.height = 150;
const status = document.createElement('p');
status.setAttribute('role', 'status');
document.body.append(canvas, status);

function Paths() {
  const alignment: PixelGridAlignment = 'round';
  const rectangle = useRectPath(16, 18, 90, 90, { alignToPixelGrid: alignment, cornerRadius: 8 });
  const line = useLinePath([[123, 107], [169, 18], [215, 107]]);
  const svg = useSvgPath('M235 107 L280 18 L325 107 Z');
  useEventTarget({ onClick: () => { status.textContent = 'Rounded rectangle'; } }, { path: rectangle, fill: true });
  useEventTarget({ onClick: () => { status.textContent = 'Polyline'; } }, { path: line, lineInteractionWidth: 12 });
  useEventTarget({ onClick: () => { status.textContent = 'SVG triangle'; } }, { path: svg, fill: true });
  return <>
    <Path pointerEvents="none" style={{ d: rectangle, fill: '#2563eb' }} />
    <Path pointerEvents="none" style={{ d: line, stroke: '#be123c', strokeWidth: 5 }} />
    <Path pointerEvents="none" style={{ d: svg, fill: '#0f766e' }} />
  </>;
}

const controller = pibbl(canvas, <Paths />);
window.addEventListener('pagehide', () => controller.dispose(), { once: true });

```

## Usage notes

- Path hooks are render-only and memoize native Path2D geometry; the painted paths opt out of pointer targeting so the hook targets receive clicks.

## Documentation version

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