openfresh / viewport-observer

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

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!