LayoutInteractivity

useBoundingRect

useBoundingRect is a reactive utility function that allows you to bind a specific elements dimensions returned from getBoundingClientRect(). The value will be updated when the window is resized, or the user scrolls.

Return Values

Name	Type	Description
element.ref	HTMLElement	The ref setter, required to set the element you're looking to observe using `bind:this={element.ref}`.
element.rect	object	An object containing the return value from the DOM method `getBoundingClientRect()` for the element you specified using `element.ref`. This value is updates when the `scroll` or `resize` event is emitted from the window, or when the `element.update` function is evoked.
element.update	function	A optional function that can be used to manually update the value of `element.rect`.

Source Code
import { onMount } from 'svelte';

const useBoundingRect = () => {
  let ref = $state();
  let rect = $state();

  const update = () => {
    if (!ref) return;
    rect = ref.getBoundingClientRect();
  };

  onMount(() => {
    window.addEventListener('resize', update);
    window.addEventListener('scroll', update);
    update();
  });

  return {
    get ref() {
      return ref;
    },
    get rect() {
      return rect;
    },
    set ref(el) {
      ref = el;
    },
    update,
  };
};

export default useBoundingRect;

<script lang="ts">
  import useBoundingRect from './useBoundingRect.svelte'

  const element = useBoundingRect();
</script>


{#snippet row({label, value })}
  <div class="row">
    <span class="label">{label}:</span>
    <span class="value">{Math.floor(value)}px</span>
  </div>
{/snippet}

<div class="container">
    <div class="box" bind:this={element.ref} contenteditable="true" on:keyup={element.update}>
        <span>Change this text to expand the box!</span>
    </div>
    {#if element.rect}
        <div class="dimensions">
            <div class="title">Dimensions</div>
            {@render row({label: "Width", value: element.rect.width })}
            {@render row({label: "Height", value: element.rect.height })}
            {@render row({label: "Top", value: element.rect.top })}
            {@render row({label: "Bottom", value: element.rect.bottom })}
            {@render row({label: "Left", value: element.rect.left })}
            {@render row({label: "Right", value: element.rect.right })}
        </div>
    {/if}
</div>

<style lang="scss">
    .container {
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:20px;
        width:100%;

        .box {
            background-color:hotpink;
            padding:30px;
            border-radius:4px;
            color:#111;
            font-weight:600;
            margin-top:60px;
        }

        .dimensions {
            align-self:flex-end;
            display:flex;
            flex-direction:column;

            background-color:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.05);
            border-radius:6px;
            padding:15px 20px;

            .title {
                text-transform:uppercase;
                letter-spacing:1px;
                font-size:12px;
                text-transform:uppercase;
                text-align:right;
                margin-bottom:10px;
                font-weight:700;
            }
        }
    }
    .row {
        display:flex;
        gap: 10px;
        font-family:monospace;
        font-size: 14px;
        align-self:flex-end;

        .label, .value {
            display: block;
        }
        
        .label {
            flex:1;
            
        }
        
        .value {
            flex:1;
            min-width:60px;
            text-align:right;
        }
    }
</style>