@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/height and clientWidth/clientHeight dimensions of html element.

It uses ResizeObserver under the hood—to observe when the element size changes. width/height come from getBoundingClientRect (border-box, affected by CSS transforms); clientWidth/clientHeight come from the element's clientWidth/clientHeight properties (padding-box, excludes border/scrollbar, unaffected by CSS transforms).

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
  size.clientWidth; // => number
  size.clientHeight; // => number
});

// reactive target

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

const size = createElementSize(target);
createEffect(() => {
  size.width; // => number | null
  size.height; // => number | null
  size.clientWidth; // => number | null
  size.clientHeight; // => 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.