# resize

> Applies `resize`, controlling which axes a user can drag the element's resize handle along.

```ts
import { resize } from "@sdxc/u/layout";
```

Applies `resize`, controlling which axes a user can drag the element's
resize handle along. Defaults to `"block"`, the shape most textareas want,
and only takes effect on an element whose `overflow` is not `visible`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.resize()` | `css({ resize: "block" })` |
| `u.resize("vertical")` | `css({ resize: "vertical" })` |
| `u.resize("none")` | `css({ resize: "none" })` |

## Examples

### Basic example

Use `resize()` to let a reader resize an element along the block axis only. Drag the textarea's corner to try it:

```tsx
<textarea placeholder="Leave a comment" mix={[resize(), is(80), bs(24), ...]} />
```

### Resizing in both directions

Use `resize("both")` on any element whose overflow is not visible, like `overflow("auto")`. Drag the corner to resize the panel:

```tsx
<div mix={[resize("both"), overflow("auto"), is(64), bs(32), ...]}>
	<p mix={[...]}>Drag the handle in the corner to make this panel any size.</p>
</div>
```

### Preventing resizing

Use `resize("none")` to keep an element at the size the layout gives it, removing a textarea's handle:

```tsx
<textarea placeholder="Fixed size" mix={[resize("none"), is(80), bs(24), ...]} />
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.resize())
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.resize())
```

## Signature

```ts
u.resize(value?: ResizeValue)
```