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')

See Also

• jongacnik/monoimage
• choojs/nanocomponent