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!