Splendid utils

Mutation Observer

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

Super simple way to use Mutation Observer

Instead of writing the standard MutationObserver 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 = mutationObserver(node, {
  callback({ entry }) {
    // Do something with the mutation observer
  },
})

Listen to multiple elements at once

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

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

Automatically take records before disconnecting

Mutation Observer has a takeRecords method that lets you process unprocessed mutations before disconnecting.

We’ve built that directly into the disconnect method so you never have to worry about taking records manually.

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


// Stops listening.
// No need to call `takeRecords` manually!
obs.disconnect()