# useWindowResize

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

The useWindowResize hook allows to react on window size changes.

## useWindowResize

### Example: Example 1

Width is more than 1024px

#### React (tsx)

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

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

export default () => {
    const getMessage = () => {
        const windowWidth = window.innerWidth;

        if (windowWidth < 1024 && windowWidth > 786) {
            return 'Width is between 786px and 1024px';
        }
        if (windowWidth < 786) {
            return 'Width is less than 786px';
        }
        if (windowWidth > 1024) {
            return 'Width is more than 1024px';
        }
        return '';
    };

    const [message, setMessage] = useState(getMessage());

    useWindowResize(() => {
        setMessage(getMessage());
    });

    return (
        <div className='display-flex justify-content-center align-items-center'>
            <span>{message}</span>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-flex justify-content-center align-items-center">
    <span>Width is more than 1024px</span>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| callback | Function | — | The callback function to be triggered. The callback will be throttled by default. |
| timeout | Number | 300 | The time in milliseconds to throttle the callback. |