# @rescui/use-resize-observer

> ResizeObserver hook

Latest version **0.4.0** (published 2026-08-26) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @rescui/use-resize-observer
pnpm add @rescui/use-resize-observer
yarn add @rescui/use-resize-observer
bun add @rescui/use-resize-observer
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2026-08-26 |
| First published | 2023-04-18 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 16.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | JetBrains |
| Maintainers | jetbrains-admin, jetbrains-buildserver, almsh |

## Links

- npm: https://www.npmjs.com/package/@rescui/use-resize-observer
- npm.io page: https://npm.io/package/@rescui/use-resize-observer

## Dependencies (2)

- [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.26.0
- [react-compiler-runtime](https://npm.io/package/react-compiler-runtime.md) ^1.0.0

## Recent versions

- 0.4.0 (latest) — 2026-08-26
- 0.3.5-RUI-308-Fix-select-issues-405b9fa40.12 (branch-RUI-308-Fix-select-issues) — 2026-08-20
- 0.3.4-RUI-297-Add-react-compiler-to-the-packages-build-ccd086200.40 (branch-RUI-297-Add-react-compiler-to-the-packages-build) — 2026-08-18
- 0.3.1-RUI-293-Update-menu-component-0e65dd41c.177 (branch-RUI-293-Update-menu-component) — 2026-07-24
- 0.3.1-RUI-293-Update-menu-component-hover-icon-d8a5b0551.180 (branch-RUI-293-Update-menu-component-hover-icon) — 2026-07-23
- 0.3.1-RUI-296-Build-docs-md-files-for-each-docs-section-b138dd5bf.166 (branch-RUI-296-Build-docs-md-files-for-each-docs-section) — 2026-07-07
- 0.3.1-RUI-291-Update-next-js-to-the-latest-version-8f54dec0a.191 (branch-RUI-291-Update-next-js-to-the-latest-version) — 2026-06-25
- 0.3.1-RUI-280-Update-select-component-downshift-2f40ef205.179 (branch-RUI-280-Update-select-component-downshift) — 2026-05-08
- 0.3.1-RUI-280-Update-select-component-separate-components-e772abaa1.168 (branch-RUI-280-Update-select-component-separate-components) — 2026-04-29
- 0.3.1-RUI-280-Update-select-component-e516591ed.166 (branch-RUI-280-Update-select-component) — 2026-04-29
- 0.3.1-RUI-286-Fix-tooltip-stacking-f4145b01.96 (branch-RUI-286-Fix-tooltip-stacking) — 2026-03-06
- 0.3.1-RUI-285-Support-blur-for-glow-hover-6f393bc1.96 (branch-RUI-285-Support-blur-for-glow-hover) — 2026-03-04
- 0.3.1-RUI-275-Propagate-rest-props-for-Dropdown-6b62f4f9.55 (branch-RUI-275-Propagate-rest-props-for-Dropdown) — 2026-01-26
- 0.3.1-RUI-274-Fix-tooltip-rendering-for-React-19-0dc475d8.57 (branch-RUI-274-Fix-tooltip-rendering-for-React-19) — 2026-01-26
- 0.3.1-RUI-270-Update-select-options-label-types-b99bd91c.49 (branch-RUI-270-Update-select-options-label-types) — 2025-12-08
- … 76 more at https://npm.io/package/@rescui/use-resize-observer/versions

## README

# ResizeObserver hook

This package is used for observing react elements.
It uses `ResizeObserver` and alleviates some of its bugs.

It's best used together with React refs. It can be used with raw `HTML` elements, although it's better to avoid that.

## Usage examples

### React ref example

```tsx
import React, { useRef } from 'react';
import { useResizeObserver } from '@rescui/use-resize-observer';

const MyComponent = () => {
  const ref = useRef<HTMLElement>(null);
  useResizeObserver(ref, (entry: ResizeObserverEntry) => {
    // resize logic
  });

  return <div ref={ref}>To the moon!</div>;
};
```

### HTML element example

**Note:** Avoid this option when possible due to additional re-renders when using [callback refs](https://legacy.reactjs.org/docs/refs-and-the-dom.html#callback-refs) and `useState`. Use React ref instead.

```tsx
import React, { useState } from 'react';
import { useResizeObserver } from '@rescui/use-resize-observer';

const MyComponent = () => {
  const [el, setEl] = useState<HTMLElement>(null);
  useResizeObserver(el, (entry: ResizeObserverEntry) => {
    // resize logic
  });

  return <div ref={setEl}>To the moon!</div>;
};
```

### Ignore first call

Sometimes you need to observe only changes and ignore the first observer call.

In that case, you may use the `ignoreFirstCall` option:

```tsx
import React, { useState } from 'react';
import { useResizeObserver } from '@rescui/use-resize-observer';

const MyComponent = () => {
  const ref = useRef<HTMLElement>(null);
  useResizeObserver(
    ref,
    (entry: ResizeObserverEntry) => {
      // resize logic
    },
    { ignoreFirstCall: true }
  );

  return <div ref={ref}>To the moon!</div>;
};
```

---
_Source: https://npm.io/package/@rescui/use-resize-observer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._