https://github.com/kodedninja/lazytrigger
Notify when certain points of the DOM enter / leave the view
https://github.com/kodedninja/lazytrigger
Last synced: about 7 hours ago
JSON representation
Notify when certain points of the DOM enter / leave the view
- Host: GitHub
- URL: https://github.com/kodedninja/lazytrigger
- Owner: kodedninja
- Created: 2019-03-18T17:42:01.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-20T18:41:40.000Z (about 7 years ago)
- Last Synced: 2025-11-12T12:32:02.653Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 3.91 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# lazytrigger
Notify when certain points of the DOM enter / leave the view using [on-intersect](https://github.com/yoshuawuyts/on-intersect).
## Installation
```
npm i --save lazytrigger
```
## Example
```javascript
var html = require('nanohtml')
var LazyTrigger = require('lazytrigger')
var trigger = new LazyTrigger(onEnter, onLeave)
module.exports = () => {
return html`
Scroll down, check the console...
${trigger.breakpoint('first')}
Even more...
${trigger.breakpoint('second')}
`
}
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.
## See Also
- [yoshuawuyts/on-intersect](https://github.com/yoshuawuyts/on-intersect)
- [jongacnik/monolazy](https://github.com/jongacnik/monolazy)
- [kodedninja/bik](https://github.com/kodedninja/bik)