useEventTarget

Read as Markdown

import { useEventTarget } from "@pibbl/core";

useEventTarget(handlers, options) accepts PibblEventHandlers and PibblEventTargetOptions, is render-only, and returns the current focus snapshot while registering/updating a geometric target, its event handlers, and focus options. Pibbl owns the registration and releases it when the hook slot is replaced or the component unmounts.

The returned focus state is a PibblEventTargetSnapshot.

function Target() {
  const path = new Path2D("M0 0h80v40H0z");
  const focus = useEventTarget(
    { onClick: () => undefined },
    { path, fill: true },
  );
  return focus.isFocused ? null : null;
}

Use FocusManagement for logical focus policy. See the Custom event targets live example.

API details from source

Registers a logical event target and returns its current focus and interaction snapshot.

useEventTarget: (handlers: PibblEventHandlers, options: PibblEventTargetOptions) => PibblEventTargetSnapshot

Related API: useEventTarget, PibblEventHandlers, PibblEventTargetOptions, PibblEventTargetSnapshot.

Parameters

• handlers — Handlers for this logical event target. See PibblEventHandlers.

• options — Hit geometry, focus, and target participation options. See PibblEventTargetOptions .

Returns

The registered target’s snapshot. See PibblEventTargetSnapshot.

See also

PibblEventHandlers

PibblEventTargetOptions

PibblEventTargetSnapshot

View source — packages/core/src/lib/hooks/use-event-target.ts:32

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 272a94a. ALPHA — NOT FOR PRODUCTION USE.