monolazy
Extended nanocomponent which provides a single onEnter callback using on-intersect when component enters the viewport.
Usage
Extend monolazy the same way you extend nanocomponent
var html = require('nanohtml')
var MonoLazy = require('monolazy')
class TestComponent extends MonoLazy {
// implement onEnter, fires when element enters viewport
onEnter () {
this.rerender()
}
// use the hasEntered property to determine if element has entered viewport
createElement () {
return html`<div>${this.hasEntered ? 'here i am' : 'patiently waiting'}</div>`
}
}Details
monolazy itself only implements load and unload. It is up to you to implement onEnter and createElement and any another methods!
If you need to implement your own load/unload, make sure you call the parent's load/unload:
class TestComponent extends MonoLazy {
load (element) {
super.load(element)
// custom load here
}
unload (element) {
super.unload(element)
// custom unload here
}
onEnter () {
this.rerender()
}
createElement () {
return html`<div>${this.hasEntered ? 'here i am' : 'patiently waiting'}</div>`
}
}Polyfill
If you need to support browsers without Intersection Observer, you can use a polyfill:
require('intersection-observer')
var MonoLazy = require('monolazy')