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!

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.

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.

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

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

Basic Usage

Import the resizeObserver function from @splendidlabz/utils/dom.

import { resizeObserver } from '@splendidlabz/utils/dom'

Grab the element you want to listen to, and pass that into resizeObserver. Three properties will be available in the callback:

entries — a list of all observed entries
entry — the current entry
observer — the resizeObserver instance

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

Observing additional elements

You can observe additional elements after the initial setup with the observe method.

const observer = resizeObserver(node, /* ... */)

// Observe additional elements
const node2 = document.querySelector('.my-element-2')
observer.observe(node2)

Listening to multiple elements

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

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

Event Listener Pattern

You can also listen for resizeObserver changes via the event listener pattern. Just listen to the resize-obs event.

const observer = resizeObserver(node, /* ... */)

node.addEventListener('resize-obs', ({ detail }) => {
  const { entries, entry, observer } = detail
  // Do something with the resize observer
})

Observer Options

You can pass in all ResizeObserver options to resizeObserver via the second argument.

const observer = resizeObserver(node, {
  callback({ entry }) { /* ... */ },
  // Other options go here ...
})

The only option is box — which determines the box model for the Resize Observer will use.

Stop Observing Elements

To stop observing an element, use the unobserve method.

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

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

To stop observing all elements, use the disconnect method.

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

// Stops listening to all elements
obs.disconnect()

Please purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.

Resize Observer API

The resizeObserver function creates a ResizeObserver instance that watches for changes in an element’s size.

const observer = resizeObserver(target, options)

Parameters

Parameter	Type	Description
`target`	`Element` `Element[]` `NodeList` `Window`	The element(s) to observe. If `Window` is passed, it will observe `document.body` instead.
`options`	`object`	Configuration options for the observer

Options

Option	Type	Default	Description
`callback`	`function`	-	Function called when size changes occur. Receives `{ entry, entries, observer }`
`box`	`'content-box'` `'border-box'` `'device-pixel-content-box'`	`content-box`	The box model to observe. See MDN for more information

Callback Parameters

When a size change occurs, the callback receives an object with:

Property	Type	Description
`entry`	`ResizeObserverEntry`	The current entry being processed
`entries`	`ResizeObserverEntry[]`	All entries being observed
`observer`	`ResizeObserver`	The observer instance

Return Value

Returns an object with the following methods:

Method	Parameters	Description
`observe`	`Element` `Element[]` `NodeList`	Start observing new elements
`unobserve`	`Element` `Element[]` `NodeList`	Stop observing an element
`disconnect`	`()`	Stop observing all elements
`destroy`	`()`	Alias for `disconnect()`

Event Listener Alternative

If no callback is provided, the observer will dispatch a resize-obs event on the target element. You can listen for this event:

element.addEventListener('resize-obs', ({ detail }) => {
  const { entry, entries, observer } = detail
  // Handle resize
})

Please purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.