The Resize Observer API is a useful browser API that allows you to watch the size of elements and receive updates whenever the size changes. I've [wrapped this API to use in React with a custom hook](/resize-observer-api/) as it can be useful to apply different styles or even swap out components depending on the size the element is taking up. So how would we go about using this API in Svelte?

## Get to the code!

There's not much to it so take a look at the code and let's walk through it.

<iframe src="https://codesandbox.io/embed/svelte-resize-observer-eo54vt?autoresize=1&fontsize=14&hidenavigation=1&module=%2FApp.svelte&theme=dark"
     className="w-full h-96 border-0 rounded-md overflow-hidden"
     title="svelte-resize-observer"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>

## Get a reference to the element

In React, whenever you want to interact with the DOM directly you have to create a reference with the `useRef` hook and then access `current` on the ref as it changes. Svelte's API is a bit easier to do this.

```html
<script>
  let boxEl;
</script>

<div class="box" bind:this={boxEl}></div>
```

We simply declare a variable then use the `bind:this` attribute on the element. Done. Now we can access the DOM on `boxEl`.

## Adding the Resize Observer

We add the observer on mount with the aptly named `onMount` lifecycle hook in Svelte.


```js
onMount(() => {
    const resizeObserver = new ResizeObserver(entries => {
      // We're only watching one element
      const entry = entries.at(0);

      //Get the block size
      boxWidth = entry.contentBoxSize[0].blockSize;
    });

    resizeObserver.observe(boxEl);

    // This callback cleans up the observer
    return () => resizeObserver.unobserve(boxEl);
  });
```

The key things to _observer_ is that we create a new `ResizeObserver` with a callback that will be triggered whenever the element changes. You can observer multiple elements but for our use case we only care about one, that's why I'm ignoring the other entries and just pulling out the first one - `const entry = entries.at(0);`.

I want to see the size of the element so I'm setting `boxWidth = entry.contentBoxSize[0].blockSize;` and Svelte will see the assignment to the variable `boxWidth` and infer this is a reactive variable so the UI will update.

Once it's setup, we observe the element with `resizeObserver.observe(boxEl);`.  The last piece of the puzzle is providing a cleanup callback so we return `resizeObserver.unobserve(boxEl);` so that if the component were to ever be unmounted, the observer will stop watching for updates.

## Wrapping up

There you have it, the Resize Observer API is a powerful web API that can come in handy. It's easy to use regardless of component framework you decide to go with. 

## Resources
- [bind:this on Svelte Docs](https://svelte.dev/docs#template-syntax-element-directives-bind-this)
- [onMount](https://svelte.dev/docs#template-syntax-element-directives-bind-this)

Use the Resize Observer API in Svelte to watch an element and receive updates when it's resized.

Learn more about Svelte

Svelte Articles

Svelte Questions