ResizeHandle

Read as Markdown

import { ResizeHandle, useManipulation, useSignal } from "@pibbl/core";

ResizeHandle draws a small frame-corner or frame-edge control and uses a CSS-pixel hit target. Its position selects the edge or corner; hitSize defaults to 24 CSS pixels.

const box = useSignal({ left: 40, top: 32, width: 180, height: 100 });
const manipulation = useManipulation({ box, resize: {} });

<ResizeHandle controller={manipulation} position="bottom-right" />;

Related types: PibblResizeHandleProps, PibblResizePosition.

Readout presentation uses style.readout with local inactive/focused/active overrides. Use formatReadout for application-defined units; labels remain inside the visible canvas. See handle guides and readouts.

Related presentation types: PibblResizeHandleStyle, PibblManipulationReadoutStyle.

API details from source

Draws an interactive handle for one edge or corner of a manipulation target.

ResizeHandle: PibblPrimitiveComponent<PibblResizeHandleProps, PrimitiveInput<PibblResizeHandleProps, PibblResizeHandleStyle>>

Parameters

props — Authored component inputs, supplied through JSX or createElement. See the linked props and style types.

Throws

When called directly; Pibbl mounts this component through JSX or createElement.

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

Own a manipulation controller: Compose a drag surface and one resize handle, inspect gesture state, and cancel explicitly. Plain source

Documentation version

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