https://github.com/andy2046/skywatch
JavaScript library to observe selected elements enter or leave the viewport
https://github.com/andy2046/skywatch
callback htmlelement javascript mutationobserver reactive resize viewport
Last synced: about 1 year ago
JSON representation
JavaScript library to observe selected elements enter or leave the viewport
- Host: GitHub
- URL: https://github.com/andy2046/skywatch
- Owner: andy2046
- License: mit
- Created: 2017-11-18T15:18:27.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-14T05:03:53.000Z (about 8 years ago)
- Last Synced: 2023-09-20T05:27:56.660Z (over 2 years ago)
- Topics: callback, htmlelement, javascript, mutationobserver, reactive, resize, viewport
- Language: JavaScript
- Homepage:
- Size: 188 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# skywatch
skywatch is a JavaScript library to observe selected elements enter or leave the viewport or resize.
## Examples
```js
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`:
```js
import { ViewportObserver, ResizeObserver } from 'skywatch'
// or
const { ViewportObserver, ResizeObserver } = require('skywatch')
```