# ResizeHandles

```ts
import { ResizeHandles, useManipulation, useSignal } from "@pibbl/core";
```

`ResizeHandles` renders corner handles by default. Set `positions` to
`"edges-and-corners"` or provide exact [`PibblResizePosition`](/reference/types/events/#pibblresizeposition)
values. `hitSize` applies to every generated handle.

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

<ResizeHandles controller={manipulation} positions="edges-and-corners" />;
```

Related types: [PibblResizeHandlesProps](/reference/types/events/#pibblresizehandlesprops), [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-ResizeHandles"></span>

Creates the configured collection of resize handles around a manipulation target.

```ts
ResizeHandles: (props: PibblResizeHandlesProps) => PibblNode
```

Related API: [ResizeHandles](/reference/components/resize-handles/), [PibblResizeHandlesProps](/reference/types/events/#pibblresizehandlesprops), [PibblNode](/reference/types/elements-components/#pibblnode).

### Parameters

- **`props`** — Controller, handle placement, and presentation options. See
[PibblResizeHandlesProps](/reference/types/events/#pibblresizehandlesprops) .

### Returns

Pibbl nodes rendering the resize handles. See [PibblNode](/reference/types/elements-components/#pibblnode).

### See also

[PibblResizeHandlesProps](/reference/types/events/#pibblresizehandlesprops)

[PibblNode](/reference/types/elements-components/#pibblnode)

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

## 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

- [Style resize and rotation handles](/minimal-examples/manipulation/handles/): Add corner handles, a rotation connector, an angle arc, and gesture readouts. [Plain source](/minimal/manipulation/handles.tsx)
## Documentation version

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