# ResizeHandle

```ts
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.

```tsx
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](/reference/types/events/#pibblresizehandleprops), [PibblResizePosition](/reference/types/events/#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](/guides/manipulation/#handle-guides-and-readouts).

Related presentation types: [PibblResizeHandleStyle](/reference/types/events/#pibblresizehandlestyle), [PibblManipulationReadoutStyle](/reference/types/events/#pibblmanipulationreadoutstyle).

## API details from source

<span id="api-ResizeHandle"></span>

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

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

Related API: [ResizeHandle](/reference/components/resize-handle/), [PibblPrimitiveComponent](/reference/types/elements-components/#pibblprimitivecomponent), [PibblResizeHandleProps](/reference/types/events/#pibblresizehandleprops), [PrimitiveInput](/reference/types/styles/#primitiveinput), [PibblResizeHandleStyle](/reference/types/events/#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.

### See also

[PibblResizeHandleProps](/reference/types/events/#pibblresizehandleprops)

[PibblResizeHandleStyle](/reference/types/events/#pibblresizehandlestyle)

[View source — packages/core/src/lib/manipulation/handles.ts:411](/source/packages/core/src/lib/manipulation/handles-ts/#L411)

## Implementation guidance for agents

Read the [Input, focus, and native HTML companion](/agents/topics/input/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Own a manipulation controller](/minimal-examples/manipulation/controller/): Compose a drag surface and one resize handle, inspect gesture state, and cancel explicitly. [Plain source](/minimal/manipulation/controller.tsx)
## Documentation version

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