# @solid-primitives/bounds > Primitives for tracking HTML element size and position on screen as it changes. Latest version **0.1.7** (published 2026-07-05) · MIT license · 0 weekly downloads ## Install ```sh npm install @solid-primitives/bounds pnpm add @solid-primitives/bounds yarn add @solid-primitives/bounds bun add @solid-primitives/bounds ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score. Warnings: low downloads; pre 1.0. ## Facts | | | |---|---| | Version | 0.1.7 | | Published | 2026-07-05 | | First published | 2022-06-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM | | Dependencies | 4 | | Unpacked size | 12.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1559 | | Author | Damian Tarnawski | | Maintainers | davedbase, lexlohr, thetarnav. | | Keywords | solid, primitives, size, position, bounds | ## Links - npm: https://www.npmjs.com/package/@solid-primitives/bounds - Repository: https://github.com/solidjs-community/solid-primitives - Homepage: https://primitives.solidjs.community/package/bounds - Issues: https://github.com/solidjs-community/solid-primitives/issues - npm.io page: https://npm.io/package/@solid-primitives/bounds ## Dependencies (4) - [@solid-primitives/utils](https://npm.io/package/@solid-primitives/utils.md) ^6.4.1 - [@solid-primitives/static-store](https://npm.io/package/@solid-primitives/static-store.md) ^0.1.4 - [@solid-primitives/event-listener](https://npm.io/package/@solid-primitives/event-listener.md) ^2.4.6 - [@solid-primitives/resize-observer](https://npm.io/package/@solid-primitives/resize-observer.md) ^2.2.0 ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 0.1.7 (latest) — 2026-07-05 - 1.0.0-next.2 (next) — 2026-08-12 - 0.0.109-beta.0 (beta) — 2023-03-03 - 1.0.0-next.1 — 2026-07-18 - 0.1.6 — 2026-07-04 - 1.0.0-next.0 — 2026-06-26 - 0.1.5 — 2026-02-24 - 0.1.4 — 2026-02-21 - 0.1.3 — 2025-06-30 - 0.1.2 — 2025-06-29 - 0.1.1 — 2025-04-27 - 0.1.0 — 2025-01-22 - 0.0.123 — 2025-01-10 - 0.0.122 — 2024-07-08 - 0.0.121 — 2024-03-05 - … 21 more at https://npm.io/package/@solid-primitives/bounds/versions ## README

Solid Primitives Bounds

# @solid-primitives/bounds [![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/bounds?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/bounds) [![version](https://img.shields.io/npm/v/@solid-primitives/bounds?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/bounds) [![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-1.json)](https://github.com/solidjs-community/solid-primitives#contribution-process) Primitives for tracking HTML element size and position on screen as it changes. - [`createElementBounds`](#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 ); }); ``` ### Reactive target 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
; ``` ### Disabling types of tracking 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, }); ``` ### Throttling updates Options [above](#disabling-types-of-tracking) 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](https://github.com/solidjs-community/solid-primitives/tree/main/packages/scheduled#readme) 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, }); ``` ## Demo https://codesandbox.io/s/solid-primitives-bounds-64rls0?file=/index.tsx ## Changelog See [CHANGELOG.md](./CHANGELOG.md) --- _Source: https://npm.io/package/@solid-primitives/bounds · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._