Splendid utils

Resize Observer

resizeObserver gives you an incredibly simple way to use the Resize Observer API — so much that you’ll probably wanna ditch the original API for good.

Super simple way to use Resize Observer

Instead of writing the standard ResizeObserver boilerplate, just use our utility function.

It can’t get simpler than doing the stuff you want inside a standard callback!

main.js
const node = document.querySelector('.my-element')
const obs = resizeObserver(node, {
  callback({ entry }) {
    // Do something with the resize observer
  },
})

Listen to multiple elements at once

Grab the elements — either as an array or nodelist — and pass them to resizeObserver. It’ll listen to them without complains.

main.js
const nodes = document.querySelectorAll('.elements')
const obs = resizeObserver(nodes, {
  callback({ entry }) {
    // Do something with the resize observer
  },
})

Unobserve or disconnect whenever you wish to

We support all the resize observer methods you’d expect — check out the guide for more details.

main.js
const obs = resizeObserver(node, /* ... */)


// Stops listening to the element
obs.unobserve(node)