viewport-observer
v2.3.0
Published
React Component that observe changes in the intersection of a target element with viewport using IntersectionObserver
Downloads
484
Readme
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!