@solid-primitives/resize-observer

@solid-primitives/resize-observer

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.

Installation

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.

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.

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

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

let ref!: HTMLDivElement;

// can use onSettled if the target variable isn't yet populated
onSettled(() => {
  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.

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-level store arrays too
const [targets, setTargets] = createStore([document.body]);
createResizeObserver(targets, ({ width, height }, el) => {});
setTargets(prev => [...prev, element]);

createWindowSize

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

How to use it

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

const size = createWindowSize();

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

useWindowSize

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

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.

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.

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

Contributors

Thanks to Moshe Udimar for this contribution!

Similar packages

Other packages similar to @solid-primitives/resize-observer

resize-observer-polyfill

resize-observer-polyfill is a widely used polyfill for the ResizeObserver API, making it available in environments where it is not natively supported. Unlike @solid-primitives/resize-observer, which is specifically designed for SolidJS, resize-observer-polyfill is framework-agnostic and can be used in any JavaScript environment.

react-resize-observer

react-resize-observer is a React-specific package that provides a component-based approach to observing element size changes. It is similar to @solid-primitives/resize-observer in functionality but tailored for React applications, offering a declarative way to handle resize events within React components.