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] |

Related

• openfresh/super-image: React component that render a image with object-fit and its fallback

License

MIT © FRESH!