Reactive primitives for observing resizing of HTML elements.

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

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

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

makeResizeObserver returns observe and unobserve functions for managing targets.

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);
  }
}

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

To dispose early, wrap the primitive with a createRoot.

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

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

Disposes automatically itself with it's parent reactive owner.

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} />;

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

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);

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

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

const size = createWindowSize();

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

useWindowSize is a singleton root 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.

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

const size = useWindowSize();

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

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.

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.

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.

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} />;

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

See CHANGELOG.md

Thanks to Moshe Udimar for this contribution!