@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.

Installation

``bash
npm install @solid-primitives/bounds


or


yarn add @solid-primitives/bounds
`

createElementBounds

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

$3

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