dom-catcher

React to specific changes in the DOM tree.

Stats

StarsIssuesVersionUpdatedCreatedSize
dom-catcher
004.0.02 years ago2 years agoMinified + gzip package size for dom-catcher in KB

Readme

DomCatcher

React to specific changes in the DOM tree.

new DomCatcher('.my-selector');

DomCatcher wraps MutationObserver and makes it user friendly and actually usable. It's designed to make it much easier for developers to "react to changes in a DOM."

Parameters

Param. Type Desc. Required
(1) CSS selector String what you're observing yes
(2) ancestral element HTMLElement where you're observing it (defaults to document.body) no

It is recommended to narrow the observer scope when possible. And in most cases it's best to set this up after your page has rendered.

Methods

  • then : accepts only a callback, which receives both added and removed sets of elements in two arguments of arrays
  • on : accepts two parameters: 1. event string (add or remove), and 2. callback, which receives one set of elements as an array
  • destroy : disconnects the observer and destroys the wrapper instance
  • history : getter; provides full history of instance activity

Usage

// example 1
new DomCatcher('.selector, .another-selector', parentElem).then((added, removed) => {});

// -----------------------------------------------
// example 2
let myCatcher = new DomCatcher('#id-selector', parentElem);

myCatcher.on('add', addedArray => {
    if (addedArray[0]){
        myCatcher.destroy();
        alert('Element created!');
    }
});

// -----------------------------------------------
// example 3
new DomCatcher('#selector').on('remove', function(arr){
    if (arr.length) this.destroy();
});

Browser Support

Modern browsers only; that is, no IE support. (The legacy browser is dead!)

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.