# useElementSize

*Category:* Utilities
*Section:* DOM behavior hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/useElementSize
*Captured:* 2026-04-27T14:59:33.593Z

The useElementSize hook allows to easily detect an elements dimension.

## useElementSize

### Example: Example 1

Resize box to see it's width updating

Width: 50, Height: 50

#### React (tsx)

```tsx
import { useState, useRef } from 'react';

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

export default () => {
    const [boxWidth, setBoxWidth] = useState(50);

    const elementRef = useRef<HTMLDivElement>(null);
    const [width, height] = useElementSize(elementRef);

    const handleResize = (diff: number) => setBoxWidth(oldWidth => oldWidth - diff);

    return (
        <div className='display-flex flex-column justify-content-center align-items-center height-100'>
            <label>Resize box to see it's width updating</label>
            <div className='height-50 bg-info position-relative' style={{ width: boxWidth }} ref={elementRef}>
                <Resizer onResize={handleResize} />
            </div>

            <div>{`Width: ${width}, Height: ${height}`}</div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-flex flex-column justify-content-center align-items-center height-100">
    <label>Resize box to see it's width updating</label>
    <div class="height-50 bg-info position-relative" style="width: 50px;">
        <div class="Resizer resize-horizontal resize-right">
        </div>
    </div>
    <div>Width: 50, Height: 50</div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| ref | Function | — | Pass a ref of the target element as parameter to the hook to get its height and width. |
| [width, height] | Number | — | Returns height and width values of the referenced element. |