# Resizer

*Category:* Components
*Section:* Misc
*Source:* https://uikit.developers.rio.cloud/#/components/resizer
*Captured:* 2026-04-27T14:58:27.067Z

A helper component to allow elements to resize.

## Resizer

> Note: When the resizer position is set to left or top you also need to position your elements on screen accordingly. Otherwise, the browser will set the height or width and expands in the opposite direction

### Example: Example 1

Horizontal (default):

Vertical (with child element as handle):

#### React (tsx)

```tsx
import { Component } from 'react';

import Resizer from '@rio-cloud/rio-uikit/Resizer';

export default class ResizeExample extends Component {
    constructor(props) {
        super(props);

        this.state = {
            box1width: 50,
            box2height: 50,
            minWidth: 25,
            maxWidth: 500,
            minHeight: 25,
            maxHeight: 500,
        };

        this.onResizeHorizontal = this.onResizeHorizontal.bind(this);
        this.onResizeVertical = this.onResizeVertical.bind(this);
        this.onResizeStart = this.onResizeStart.bind(this);
        this.onResizeEnd = this.onResizeEnd.bind(this);
    }

    getWidthInBoundaries(minWidth, maxWidth, width) {
        if (width > 0 && width < minWidth) {
            return minWidth;
        }

        if (width > 0 && width > maxWidth) {
            return maxWidth;
        }

        if (width > 0 && width > maxWidth) {
            return maxWidth;
        }

        return width;
    }

    getHeightInBoundaries(minHeight, maxHeight, height) {
        if (height > 0 && height < minHeight) {
            return minHeight;
        }

        if (height > 0 && height > maxHeight) {
            return maxHeight;
        }

        if (height > 0 && height > maxHeight) {
            return maxHeight;
        }

        return height;
    }

    onResizeHorizontal(diff) {
        const { minWidth, maxWidth } = this.props;
        const updatedWidth = this.state.box1width - diff;

        this.setState({
            box1width: this.getWidthInBoundaries(minWidth, maxWidth, updatedWidth),
        });
    }

    onResizeVertical(diff) {
        const { minHeight, maxHeight } = this.state;
        const updatedHeight = this.state.box2height - diff;

        this.setState({
            box2height: this.getHeightInBoundaries(minHeight, maxHeight, updatedHeight),
        });
    }

    onResizeStart(/* event*/) {}

    onResizeEnd(/* event*/) {}

    render() {
        return (
            <div>
                <div>{'Horizontal (default): '}</div>
                <div className='height-50 bg-light position-relative' style={{ width: this.state.box1width }}>
                    <Resizer onResize={this.onResizeHorizontal} />
                </div>
                <hr />
                <div>Vertical (with child element as handle):</div>
                <div className='width-50 bg-light position-relative' style={{ height: this.state.box2height }}>
                    <Resizer
                        onResizeStart={this.onResizeStart}
                        onResize={this.onResizeVertical}
                        onResizeEnd={this.onResizeEnd}
                        direction={Resizer.VERTICAL}
                        position={Resizer.BOTTOM}
                    >
                        <div className='height-5 width-100pct bg-dark' />
                    </Resizer>
                </div>
            </div>
        );
    }
}
```

#### HTML (html)

```html
<div>
    <div>Horizontal (default): </div>
    <div class="height-50 bg-light position-relative" style="width: 50px;">
        <div class="Resizer resize-horizontal resize-right">
        </div>
    </div>
    <hr>
    <div>Vertical (with child element as handle):</div>
    <div class="width-50 bg-light position-relative" style="height: 50px;">
        <div class="Resizer resize-vertical resize-bottom">
            <div class="height-5 width-100pct bg-dark">
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| position | typeof LEFT \| typeof RIGHT \| typeof TOP \| typeof BOTTOM | — | Defines where the resize handle is positioned relative to the element to resize. Possible values are: Resizer.LEFT, Resizer.RIGHT, Resizer.TOP, Resizer.BOTTOM 'left', 'right', 'top', 'bottom' |
| direction | typeof HORIZONTAL \| typeof VERTICAL | — | Defines on which axis to resize. Possible values are: Resizer.HORIZONTAL Resizer.VERTICAL 'x' 'y' |
| onResizeStart | (event: MouseEvent \| TouchEvent) => void | — | Callback when the resize starts, means when the handle is pressed. It returns the respective event. |
| onResize | (diff: number) => void | — | Callback when the resize handle is moved. The function returns the distant between the last position and the mouse movement. Means you can either subtract or add this diff to the elements width you want to change. |
| onResizeEnd | (event: Event) => void | — | Callback when the resize ends, means when the handle is released. It returns the respective event. |
| className | string | — | Additional classes to be set on the wrapper element. |