Viewport-observer NPM

ViewportObserver

React Component that observe changes in the intersection of a target element with viewport using IntersectionObserver

Install

$ npm install --save viewport-observer

This package depends on IntersectionObserver, so you probably need to polyfill via w3c/IntersectionObserver Polyfill before using this package.

Usage

// you probably need to polyfill
import 'intersection-observer';
import ViewportObserver from 'viewport-observer';

...

<ViewportObserver
  onChange={() => console.log('onChange')}
  onEnter={() => console.log('onEnter')}
  onLeave={() => console.log('onLeave')}>
  <div>{/* ... */}</div>
</ViewportObserver>

You can call dispose() of ViewportObserver instance to stop observing and dispose IntersectionObserver instance.

Config

Property	Type	Default Value
tagName	`String`	`div`
display	`String`	`''`
onChange	`Function`	`() => {}`
onEnter	`Function`	`() => {}`
onLeave	`Function`	`() => {}`
root	`Node`	`null`
rootMargin	`DOMString`	`0px`
threshold	`Array<Number>`	`[0]`