React Component that observe changes in the intersection of a target element with viewport using IntersectionObserver
Clone or download
Latest commit ad84252 Jun 28, 2018

readme.md

ViewportObserver

Greenkeeper badge Build Status devDependency Status peerDependency Status codecov

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]

Related

License

MIT © FRESH!