@solid-primitives/resize-observer
v2.1.3TypeScript
Reactive primitives for observing resizing of HTML elements.
0/weekUpdated 7 months agoMITUnpacked: 17.2 KB
Published by Moshe Udimar
npm install @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
``bash`
npm install @solid-primitives/resize-observeror
pnpm add @solid-primitives/resize-observeror
yarn add @solid-primitives/resize-observer
makeResizeObserver
Instantiate a new ResizeObserver that automatically get's disposed on cleanup.
$3
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.
`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.
$3
`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);
});
});
`
#### Reactive targets
The
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);
`Creates a reactive store-like object of current width and height dimensions of the browser window.
$3
ts
import { createWindowSize } from "@solid-primitives/resize-observer";const size = createWindowSize();
createEffect(() => {
size.width; // => number
size.height; // => number
});
`$3
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.`ts
import { useWindowSize } from "@solid-primitives/resize-observer";const size = useWindowSize();
createEffect(() => {
size.width; // => number
size.height; // => number
});
`$3
The
isn't meant to be used for creating media queries.If you want a reactive interface for media-queries, please checkout the media package.
createElementSizeCreates a reactive store-like object of current width and height dimensions of html element.
It uses
under the hood—to observe when the element size changes—and getBoundingClientRect to get the current size.$3
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();
const size = createElementSize(target);
createEffect(() => {
size.width; // => number | null
size.height; // => number | null
});
;
``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!