Skip to content

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

Notifications You must be signed in to change notification settings

openfresh/viewport-observer

Repository files navigation

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!

About

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

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published