vp-notifier

web component that dispatches an event whenever it comes in and goes out of viewport

Usage no npm install needed!

<script type="module">
  import vpNotifier from 'https://cdn.skypack.dev/vp-notifier';
</script>

README

vp-notifier

A web component that emits event onChange whenever it comes in or goes out of viewport.

Installation

npm install vp-notifier --save

Usage

require('vp-notifer')

<x-vp-notifier>
// HTML content
</x-vp-notifier>

document.querySelector('x-vp-notifier')
.addEventListener('onChange', callback)

const callback = x => {
    const rect = x.detail.intersectionRect
    rect.height * rect.width === 0 // component went out of viewport
    rect.height * rect.width > 0   // component came inside viewport
}