# @solid-primitives/resize-observer

> Reactive primitives for observing resizing of HTML elements.

Latest version **2.2.0** (published 2026-07-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @solid-primitives/resize-observer
pnpm add @solid-primitives/resize-observer
yarn add @solid-primitives/resize-observer
bun add @solid-primitives/resize-observer
```

## Health

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

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.2.0 |
| Published | 2026-07-05 |
| First published | 2021-07-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 4 |
| Unpacked size | 17 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1557 |
| Author | Moshe Udimar |
| Maintainers | davedbase, lexlohr, thetarnav. |
| Keywords | resize, observer, solid, primitives |

## Links

- npm: https://www.npmjs.com/package/@solid-primitives/resize-observer
- Repository: https://github.com/solidjs-community/solid-primitives
- Homepage: https://primitives.solidjs.community/package/resize-observer
- Issues: https://github.com/solidjs-community/solid-primitives/issues
- npm.io page: https://npm.io/package/@solid-primitives/resize-observer

## Dependencies (4)

- [@solid-primitives/utils](https://npm.io/package/@solid-primitives/utils.md) ^6.4.1
- [@solid-primitives/rootless](https://npm.io/package/@solid-primitives/rootless.md) ^1.5.4
- [@solid-primitives/static-store](https://npm.io/package/@solid-primitives/static-store.md) ^0.1.4
- [@solid-primitives/event-listener](https://npm.io/package/@solid-primitives/event-listener.md) ^2.4.6

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 2.2.0 (latest) — 2026-07-05
- 4.0.0-next.3 (next) — 2026-08-12
- 2.0.11-beta.0 (beta) — 2023-03-03
- 4.0.0-next.2 — 2026-07-18
- 2.1.6 — 2026-07-04
- 4.0.0-next.1 — 2026-07-04
- 4.0.0-next.0 — 2026-06-26
- 2.1.5 — 2026-02-24
- 2.1.4 — 2026-02-21
- 2.1.3 — 2025-06-30
- 2.1.2 — 2025-06-29
- 2.1.1 — 2025-04-27
- 2.1.0 — 2025-01-22
- 2.0.27 — 2025-01-10
- 2.0.26 — 2024-07-08
- … 35 more at https://npm.io/package/@solid-primitives/resize-observer/versions

## README

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=Resize%20Observer" alt="Solid Primitives Resize Observer">
</p>

# @solid-primitives/resize-observer

[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/resize-observer?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/resize-observer)
[![size](https://img.shields.io/npm/v/@solid-primitives/resize-observer?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/resize-observer)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-3.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)

Reactive primitives for observing resizing of HTML elements.

- [`makeResizeObserver`](#makeresizeobserver) — Instantiate a new ResizeObserver that automatically get's disposed on cleanup.
- [`createResizeObserver`](#createresizeobserver) — Create resize observer instance, listening for changes to size of reactive element targets array.
- [`createWindowSize`](#createwindowsize) — Creates a reactive store-like object of current width and height dimensions of the browser window.
- [`createElementSize`](#createelementsize) — Creates a reactive store-like object of current width and height dimensions of html element.

## Installation

```bash
npm install @solid-primitives/resize-observer
# or
pnpm add @solid-primitives/resize-observer
# or
yarn add @solid-primitives/resize-observer
```

## `makeResizeObserver`

Instantiate a new ResizeObserver that automatically get's disposed on cleanup.

### How to use it

`makeResizeObserver` returns `observe` and `unobserve` functions for managing targets.

```ts
import { makeResizeObserver } from "@solid-primitives/resize-observer";

const { observe, unobserve } = makeResizeObserver(handleObserverCallback, { box: "content-box" });
observe(document.body);
observe(ref);

function handleObserverCallback(entries: ResizeObserverEntry[]) {
  for (const entry of entries) {
    console.log(entry.contentRect.width);
  }
}
```

#### Disposing

`makeResizeObserver` will dispose itself with it's parent reactive owner.

To dispose early, wrap the primitive with a [`createRoot`](https://www.solidjs.com/docs/latest/api#createroot).

```ts
const { dispose } = createRoot(dispose => {
  const { observe, unobserve } = makeResizeObserver(handleObserverCallback);
  return { dispose, observe, unobserve };
});
// dispose early
dispose();
```

## `createResizeObserver`

Create resize observer instance, listening for changes to size of reactive element targets array.

Disposes automatically itself with it's parent reactive owner.

### How to use it

```tsx
import { createResizeObserver } from "@solid-primitives/resize-observer";

let ref!: HTMLDivElement;

// can in onMount if the target variable isn't yet populated
onMount(() => {
  createResizeObserver(ref, ({ width, height }, el) => {
    if (el === ref) console.log(width, height);
  });
});

<div ref={ref} />;
```

#### Reactive targets

The `targets` argument can be a reactive signal or top-level store array.

```ts
const [targets, setTargets] = createSignal([document.body]);
createResizeObserver(targets, ({ width, height }, el) => {});
// updating the signal will unobserve removed elements and observe added ones
setTargets(p => [...p, element]);

// createResizeObserver supports top-lever store arrays too
const [targets, setTargets] = createStore([document.body]);
createResizeObserver(targets, ({ width, height }, el) => {});
setTargets(targets.length, element);
```

## `createWindowSize`

Creates a reactive store-like object of current width and height dimensions of the browser window.

### How to use it

```ts
import { createWindowSize } from "@solid-primitives/resize-observer";

const size = createWindowSize();

createEffect(() => {
  size.width; // => number
  size.height; // => number
});
```

### `useWindowSize`

`useWindowSize` is a [singleton root](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSingletonRoot) primitive. It is providing the same reactive object as `createWindowSize`, but the object instance, signals and event-listeners are shared between dependents, making it more optimized to use in multiple places at once.

```ts
import { useWindowSize } from "@solid-primitives/resize-observer";

const size = useWindowSize();

createEffect(() => {
  size.width; // => number
  size.height; // => number
});
```

### Media Queries

**The `createWindowSize` isn't meant to be used for creating media queries.**

If you want a reactive interface for media-queries, please checkout [the media package](https://github.com/solidjs-community/solid-primitives/tree/main/packages/media#readme).

## `createElementSize`

Creates a reactive store-like object of current width and height dimensions of html element.

It uses `ResizeObserver` under the hood—to observe when the element size changes—and `getBoundingClientRect` to get the current size.

### How to use it

`createElementSize` needs to be provided a target. It can be an HTML element, or a reactive signal returning one. Target also takes falsy values to disable tracking.

```tsx
import { createElementSize } from "@solid-primitives/resize-observer";

const size = createElementSize(document.body);
createEffect(() => {
  size.width; // => number
  size.height; // => number
});

// reactive target

const [target, setTarget] = createSignal<HTMLElement>();

const size = createElementSize(target);
createEffect(() => {
  size.width; // => number | null
  size.height; // => number | null
});

<div ref={setTarget} />;
```

## Demo

https://codesandbox.io/s/solid-primitives-resize-observer-yg41gd?file=/index.tsx

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)

## Contributors

Thanks to Moshe Udimar for this contribution!

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