Skip to content

Commit

Permalink
updated README
Browse files Browse the repository at this point in the history
  • Loading branch information
amorey committed Sep 18, 2017
1 parent 5be08aa commit 5a4e356
Showing 1 changed file with 32 additions and 1 deletion.
33 changes: 32 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,26 @@ SentinelJS is a tiny JS library that lets you detect new DOM nodes using CSS sel

## Introduction

SentinelJS is a tiny JS library that makes it easier to set up watch functions that will notify you anytime a new DOM node is added that satisfies a CSS selector rule.
SentinelJS is a tiny JS library that makes it easy to set up watch functions that will notify you anytime a new DOM node is added that satisfies a CSS selector rule. SentinelJS is useful for writing plugins that make modifications when a new DOM node is inserted. This can be useful for creating Shadow DOM-like experience where you can define interactive components using purely HTML.

The latest version of SentinelJS can be found in the `dist/` directory in this repository:
* [sentinel.js](https://raw.githubusercontent.com/muicss/sentineljs/master/dist/sentinel.js)
* [sentinel.min.js](https://raw.githubusercontent.com/muicss/sentineljs/master/dist/sentinel.min.js)

You can also use it as a CJS or AMD module:

```bash
$ npm install --save sentinel-js
```

```javascript
var sentinel = require('sentinel-js');

sentinel.on('my-awesome-component', function(el) {
// add more functionality to the element
el.innerHTML = 'The sentinel is always watching.';
});
```

## Quickstart

Expand Down Expand Up @@ -52,10 +71,22 @@ SentinelJS is a tiny JS library that makes it easier to set up watch functions t

#### on(cssSelectors, callbackFn)

Use the `on()` method to set up a watch for new DOM nodes.

* `cssSelectors` - A single selector string or an array
* `callbackFn` - The callback function

#### off(cssSelectors[, callbackFn])

Use the `off()` method to remove a watch. If `callbackFn` is emtpy, all watches for the given cssSelector will be removed.

* `cssSelectors` - A single selector string or an array
* `callbackFn` - The callback function you want to remove the watch for (optional)

#### reset()

The `reset()` method will remove all watches and callbacks from the sentinel library.

### Async Loading

To make it easy to use SentinelJS asynchronously, the library dispatches a `sentinel-load` event that will notify you when the library is ready to be used:
Expand Down

0 comments on commit 5a4e356

Please sign in to comment.