skywatch

skywatch is a JavaScript library to observe selected elements enter or leave the viewport or resize.

Examples

import { ViewportObserver, ResizeObserver } from 'skywatch'

const callback = (element, event) => {
  console.log(element, event)
}

// ViewportObserver
const obs = ViewportObserver.of({ debounce: 1000, tolerance: 20, container: window })

// callback when element enter the viewport
obs.subscribe('enter', 'div.element', callback)

// callback when element leave the viewport
obs.subscribe('leave', 'div.element', callback)

// check if element is in Viewport
ViewportObserver.inViewport('div.element')

// cleanup
obs.unsubscribe('enter', 'div.element', callback)
obs.unsubscribe('leave', 'div.element', callback)
obs.disconnect()

// ResizeObserver
const reobs = ResizeObserver.of(callback)

// observe target element
reobs.observe('div.element')

// unobserve target element
reobs.unobserve('div.element')

// cleanup
reobs.disconnect()

Installation

npm install --save skywatch

Usage

You can import from skywatch:

import { ViewportObserver, ResizeObserver } from 'skywatch'
// or
const { ViewportObserver, ResizeObserver } = require('skywatch')