Wondering what’s next for npm?Check out our public roadmap! »

    dom-catcher

    4.0.0 • Public • Published

    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!)

    Install

    npm i dom-catcher

    DownloadsWeekly Downloads

    1

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    19.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar