useCursor

Read as Markdown

import { useCursor, Text } from "@pibbl/core";

useCursor({ path?, style?, fill?, lineInteractionWidth? }) is render-only. With a path, it follows the same logical targeting geometry as mouse events; without one it supplies a component-level default. Re-render updates it, and replacement or unmount releases its region and cursor ownership.

Its style uses the local CursorStyle vocabulary.

function Link() {
  useCursor({
    path: new Path2D("M0 0h120v36H0z"),
    style: "pointer",
    fill: true,
  });
  return <Text style={{ fill: "#2563eb" }}>Open</Text>;
}

See the Hit areas and cursors live example.

API details from source

Hook: wires a CSS cursor to the same logical target resolver used by mouse events. The cursor is released when this hook slot is replaced or removed.

useCursor: ({ path, style, fill, lineInteractionWidth, }: { path?: Path2D | PathGeometry; style?: string; fill?: boolean; lineInteractionWidth?: number; }) => void

Related API: useCursor, PathGeometry.

Parameters

• options — Cursor style and optional fill or stroke hit region for the current component. See PathGeometry .

See also

PathGeometry

View source — packages/core/src/lib/hooks/use-cursor.ts:29

Implementation guidance for agents

Read the Input, focus, and native HTML companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.

Complete minimal examples

• Typed event target: A geometric Canvas target routes pointer, mouse, touch, wheel, keyboard, input, clipboard, and drag events. Plain source

Documentation version

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