# hooks/useResizeDrag (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/hooks/useResizeDrag.ts](https://github.com/Tahul/zidane/blob/main/ui/src/hooks/useResizeDrag.ts).

## Functions

### `clampWidth`

Function.

Clamps a size to a range and rounds it to whole pixels.

```ts
function clampWidth(value: number, min: number, max: number): number
```

**Parameters**

- `value` (`number`): The size to clamp.
- `min` (`number`): The lower bound.
- `max` (`number`): The upper bound.

**Returns** `number`: The clamped, rounded size.

Source: [ui/src/hooks/useResizeDrag.ts:99](https://github.com/Tahul/zidane/blob/main/ui/src/hooks/useResizeDrag.ts#L99)

### `useResizeDrag`

Function.

Resizes a side panel by dragging its edge. While dragging, it writes the clamped size to a CSS
variable on `target` without React state changes, and calls `onCommit` once on release.

```ts
function useResizeDrag(options: ResizeDragOptions): ResizeDrag
```

**Parameters**

- `options` (`ResizeDragOptions`): See [`ResizeDragOptions`](https://zidane.si/docs/reference/ui-hooks-use-resize-drag.md#ResizeDragOptions).

**Returns** `ResizeDrag`: Whether a drag is active, and the props for the handle.

Source: [ui/src/hooks/useResizeDrag.ts:110](https://github.com/Tahul/zidane/blob/main/ui/src/hooks/useResizeDrag.ts#L110)

## Interfaces

### `ResizeDrag`

Interface.

What [`useResizeDrag`](https://zidane.si/docs/reference/ui-hooks-use-resize-drag.md#useResizeDrag) returns.

```ts
interface ResizeDrag
```

**Properties**

- `active` (`boolean`): Whether a drag is in progress.
- `handleProps` (`ResizeDragHandleProps`): Props to spread onto the handle element.

Source: [ui/src/hooks/useResizeDrag.ts:82](https://github.com/Tahul/zidane/blob/main/ui/src/hooks/useResizeDrag.ts#L82)

### `ResizeDragHandleProps`

Interface.

Props [`useResizeDrag`](https://zidane.si/docs/reference/ui-hooks-use-resize-drag.md#useResizeDrag) returns for the drag handle element.

```ts
interface ResizeDragHandleProps
```

**Properties**

- `aria-orientation` (`'horizontal' | 'vertical'`): Orientation of the separator: `vertical` when resizing a width, `horizontal` for a height.
- `aria-valuemax` (`number`): The largest size.
- `aria-valuemin` (`number`): The smallest size.
- `aria-valuenow` (`number`): The current size.
- `onDoubleClick` (`() => void`): Resets the size to `defaultValue`.
- `onPointerDown` (`(e: PointerEvent<HTMLElement>) => void`): Starts a drag on a primary-button press, with pointer capture.
- `role` (`'separator'`): The handle is a `separator`.
- `tabIndex` (`-1`): The handle is not in the tab order.

Source: [ui/src/hooks/useResizeDrag.ts:62](https://github.com/Tahul/zidane/blob/main/ui/src/hooks/useResizeDrag.ts#L62)

### `ResizeDragOptions`

Interface.

Options of [`useResizeDrag`](https://zidane.si/docs/reference/ui-hooks-use-resize-drag.md#useResizeDrag).

```ts
interface ResizeDragOptions
```

**Properties**

- `axis?` (`'x' | 'y'`): `x` (default) resizes a width; `y` a height, with `start` the top edge
  (a drawer anchored at the bottom) and `end` the bottom edge.
- `defaultValue` (`number`): Size in px restored by a double-click on the handle.
- `edge` (`'start' | 'end'`): Which side of the element the handle sits on. `end` is for a panel anchored at the left, such
  as the sidebar, and `start` for one anchored at the right. It sets the drag direction.
- `max` (`number`): Largest size in px a drag can reach.
- `min` (`number`): Smallest size in px a drag can reach.
- `onCommit` (`(width: number) => void`): Called once on release with the final size in px, and on a double-click with `defaultValue`.
  Nothing is called while dragging.
- `target` (`{ cssVar: string; ref: RefObject<HTMLElement | null> }`): Element whose CSS variable receives the live width during a drag.
- `value` (`number`): The current size in px. A drag starts from it.

Source: [ui/src/hooks/useResizeDrag.ts:33](https://github.com/Tahul/zidane/blob/main/ui/src/hooks/useResizeDrag.ts#L33)