# Resizer

```ts
import { Resizer } from 'cx/widgets';
```

The Resizer component is a draggable divider that allows users to resize adjacent elements. Place it between two sibling elements to enable resizing. Double-click to reset to the default size.

```tsx
import { createModel } from "cx/data";
import { format } from "cx/ui";
import { Resizer } from "cx/widgets";

interface Model {
  leftWidth: number;
}

const m = createModel<Model>();

export const model = {
  leftWidth: 200,
};

export default (
  <div className="flex h-[150px] border border-gray-300">
    <div
      className="p-4"
      style={{ width: format(m.leftWidth, "n;0:suffix;px") }}
    >
      Left panel (drag the resizer)
    </div>
    <Resizer
      size={m.leftWidth}
      minSize={100}
      maxSize={400}
      className="border-x border-gray-300"
    />
    <div className="flex-1 p-4">Right panel</div>
  </div>
);

```

## Configuration

| Property | Type | Description |
| -------- | ---- | ----------- |
| `size` | `number` | A binding for storing the resized element's size. |
| `defaultSize` | `number` | Value set when the user double-clicks the resizer. |
| `minSize` | `number` | Minimum allowed size. Default is `0`. |
| `maxSize` | `number` | Maximum allowed size. Default is `1000000`. |
| `horizontal` | `boolean` | Set to `true` for horizontal resizing (row-resize). Default is `false` (vertical, col-resize). |
| `forNextElement` | `boolean` | Use the element after the resizer for size measurements instead of before. Default is `false`. |
| `baseClass` | `string` | Base CSS class. Default is `resizer`. |