Lazytrigger NPM

lazytrigger

Notify when certain points of the DOM enter / leave the view using on-intersect.

Installation

npm i --save lazytrigger

Example

var html = require('nanohtml')
var LazyTrigger = require('lazytrigger')

var trigger = new LazyTrigger(onEnter, onLeave)

module.exports = () => {
  return html`
    <div style="font-size: 5rem;">
      <div style="height: 200vh">Scroll down, check the console...</div>
      ${trigger.breakpoint('first')}
      <div style="height: 200vh">Even more...</div>
      ${trigger.breakpoint('second')}
    </div>
  `
}

function onEnter (id) {
  console.log(id + ' entered')
}

function onLeave (id) {
  console.log(id + ' left')
}

Why?

Put it to the bottom of an endless scrolling list, play sounds, change the background image, autoplay videos, you name it.

API

`trigger = new LazyTrigger(onEnter(id), onLeave(id))`

Initialize a new handler. onEnter is called when a breakpoint enters the view, onLeave is called when a breakpoint leaves the view; both get the id of the breakpoint.

`trigger.breakpoint(id)`

Returns an empty element that will be observed. It has a comment inside () in order to be easily identifiable.

`trigger.stop(id)`

Stop observing a specific breakpoint.

`trigger.stopAll()`

Stop observing all the breakpoints.

lazytrigger v0.2.0