Detect New Elements Using CSS Selectors – sentinel.js

Preview:

Description:

sentinel.js is a small (2kb minified) JavaScript library which adds a watch for single or multiple CSS selectors with callback and extra animation support.

How to use it:

Install the sentinel.js into your project.

$ npm install --save sentinel-js
var sentinel = require('sentinel-js');

Or directly download and load the sentinel.js script into your document.

<script src="sentinel.js"></script>

The basic usage.

• cssSelectors: CSS selectors
• callbackFn: callback function
• extraAnimation: triggers extra animations

// sentinel.on(cssSelectors, callbackFn[, extraAnimation])
sentinel.on('.myElement', function(el) {
  // add an input box
  var inputEl = document.createElement('input');
  el.appendChild(inputEl);
}, 'anim1, anim2');

Remove a watch or a callback.

sentinel.off(cssSelectors[, callbackFn])

Reset all the watches and callbacks.

sentinel.reset();

Changelog:

v0.0.5 (10/09/2018)

• Added support for Event object constructor to sentinel-load event