Primitives for tracking HTML element size and position on screen as it changes.
npm install @solid-primitives/bounds



Primitives for tracking HTML element size and position on screen as it changes.
- createElementBounds - Creates a reactive store-like object of current element bounds — position on the screen, and size dimensions.
``bash`
npm install @solid-primitives/boundsor
yarn add @solid-primitives/bounds
Creates a reactive store-like object of current element bounds — position on the screen, and size dimensions. Bounds will be automatically updated on scroll, resize events and updates to the DOM.
`ts
import { createElementBounds } from "@solid-primitives/bounds";
const target = document.querySelector("#my_elem")!;
const bounds = createElementBounds(target);
createEffect(() => {
console.log(
bounds.width, // => number
bounds.height, // => number
bounds.top, // => number
bounds.left, // => number
bounds.right, // => number
bounds.bottom, // => number
);
});
`
The element target can be a reactive signal. Set to falsy value to disable tracking.
`tsx
const [target, setTarget] = createSignal
const bounds = createElementBounds(target);
// if target is undefined, scroll values will be null
createEffect(() => {
bounds.width; // => number | null
bounds.height; // => number | null
});
// bounds object will always be in sync with current target
$3
These types of tracking are available: _(all are enabled by default)_
-
trackScroll — listen to window scroll events
- trackMutation — listen to changes to the dom structure/styles
- trackResize — listen to element's resize events`ts
// won't track mutations nor scroll events
const bounds = createElementBounds(target, {
trackScroll: false,
trackMutation: false,
});
`$3
Options above allow passing a guarding function for controlling frequency of updates.
The scroll event/mutations/resizing can be triggered dozens of times per second, causing calculating bounds and updating the store every time. Hence it is a good idea to throttle/debounce updates.
`ts
import { UpdateGuard, createElementBounds } from "@solid-primitives/bounds";
import { throttle } from "@solid-primitives/scheduled";const throttleUpdate: UpdateGuard = fn => throttle(fn, 500);
const bounds = createElementBounds(target, {
trackMutation: throttleUpdate,
trackScroll: throttleUpdate,
});
``https://codesandbox.io/s/solid-primitives-bounds-64rls0?file=/index.tsx
See CHANGELOG.md