# useResizeObserver

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

The useResizeObserver hook allows to react on resize changes of a given element.

## useResizeObserver

You can either attach the returned ref to the observed element or pass an existing DOM element directly as the optional first argument.

> Note: that is important to consider the padding of the element to observe and to take it into consideration when working with its width and height. When using the contentRect from the observerEntry, keep in mind that this will not include the paddings.

To include the target element padding, use the third return value with inlineSize and blockSize, or read borderBoxSize from the observer entry directly.

### Example: Example 1

Box with padding 200x50

#### React (tsx)

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

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

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

    // The third tuple item already exposes border-box based inline/block size values.
    const [ref, _, { inlineSize, blockSize }] = useResizeObserver();

    const handleResizeHorizontal = (diff: number) => setBoxWidth(previousValue => previousValue - diff);

    return (
        <>
            <label>Box with padding</label>
            <div
                className={
                    'height-50 bg-info position-relative display-flex align-items-center ' +
                    'justify-content-center padding-5'
                }
                style={{ width: boxWidth }}
                ref={ref}
            >
                <div className='text-color-white text-medium'>
                    {inlineSize ?? 0}x{blockSize ?? 0}
                </div>
                <Resizer onResize={handleResizeHorizontal}>
                    <div className='width-5 height-100pct bg-light' />
                </Resizer>
            </div>
        </>
    );
};
```

#### HTML (html)

```html
<label>Box with padding</label>
<div class="height-50 bg-info position-relative display-flex align-items-center justify-content-center padding-5" style="width: 200px;">
    <div class="text-color-white text-medium">200x50</div>
    <div class="Resizer resize-horizontal resize-right">
        <div class="width-5 height-100pct bg-light">
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| observedElement | HTMLElement \| null | — | Optional existing DOM element to observe directly instead of attaching the returned ref. |

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| ref | MutableRefObject<T \| null> | — | Ref object for the observed element. When you pass observedElement directly, this ref can be ignored. |
| observerEntry | ResizeObserverEntry \| null | — | The latest ResizeObserverEntry or null until the first observation. See https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry |
| size | { inlineSize: number \| undefined; blockSize: number \| undefined } | — | Convenience object that prefers borderBoxSize and falls back to contentRect. |

### Example: Example 2

Box without padding 200x50

#### React (tsx)

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

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

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

    const [ref, observerEntry] = useResizeObserver();

    const contentRect = observerEntry?.contentRect;

    const getContentRect = useCallback(
        (key: keyof DOMRectReadOnly) => {
            const value = contentRect?.[key];

            return typeof value === 'number' ? Math.round(value) : 0;
        },
        [contentRect]
    );

    const handleResizeHorizontal = (diff: number) => setBoxWidth(previousValue => previousValue - diff);

    return (
        <>
            <label>Box without padding</label>
            <div
                className='height-50 bg-info position-relative display-flex align-items-center justify-content-center'
                style={{ width: boxWidth }}
                ref={ref}
            >
                <div className='text-color-white text-medium'>
                    {getContentRect('width')}x{getContentRect('height')}
                </div>
                <Resizer onResize={handleResizeHorizontal}>
                    <div className='width-5 height-100pct bg-light' />
                </Resizer>
            </div>
        </>
    );
};
```

#### HTML (html)

```html
<label>Box without padding</label>
<div class="height-50 bg-info position-relative display-flex align-items-center justify-content-center" style="width: 200px;">
    <div class="text-color-white text-medium">200x50</div>
    <div class="Resizer resize-horizontal resize-right">
        <div class="width-5 height-100pct bg-light">
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| observedElement | HTMLElement \| null | — | Optional existing DOM element to observe directly instead of attaching the returned ref. |

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| ref | MutableRefObject<T \| null> | — | Ref object for the observed element. When you pass observedElement directly, this ref can be ignored. |
| observerEntry | ResizeObserverEntry \| null | — | The latest ResizeObserverEntry or null until the first observation. See https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry |
| size | { inlineSize: number \| undefined; blockSize: number \| undefined } | — | Convenience object that prefers borderBoxSize and falls back to contentRect. |