insular-observer
Efficiently use an Observer (i.e. IntersectionObserver) without the ugly observer callback. insular-observer
gives you a simple, per-target observe/unobserve
API that uses the same observer instance internally.
Huh?
Something like IntersectionObserver
is particularly lame to use because you get an array of events that may contain events for multiple targets - all in the same callback at the same time. It tempts you to make a new observer per target and just observe that single target with it, but it is more performant to reuse the observer and observe multiple targets (and so back to jerk-ugly-code). You can use insular-observer
to solve these issues.
install
$ npm install insular-observer
API
InsularObserver(Observer, [options])
Pass the Observer class and constructor options (if applicable), get back a nice observe
function.
const observeIntersection = InsularObserver(IntersectionObserver, { threshold: [ 0 ] })
observeIntersection(fooTarget, entry => {
assert(fooTarget === entry.target) // true
})
observeIntersection(barTarget, entry => {
assert(barTarget === entry.target) // true
})
observe(target, [options], listener)
Takes a target and a listener that only pertains to that target. Returns an unobserve
function you can call to stop listening.
The optional options
argument is to support Observers that take options in their observe
call (i.e. MutationObserver).
const observeIntersection = InsularObserver(IntersectionObserver, { threshold: [ 0 ] })
const unobserve = observe(someTarget, entry => { // do stuff })
unobserve()
Returned from observe(target, listener)
. Stops listening to that listener.
const observeIntersection = InsularObserver(IntersectionObserver, { threshold: [ 0 ] })
const unobserve = observe(someTarget, entry => {
// do stuff
unobserve() // stop listening
})