react-intersection-visible
HOC-wrapper Component that helps you track when an element enters in the viewport. It uses the new IntersectionObserver API with polyfill fallback
How to use
- Import
IntersectionVisible
hoc component - Wrap your main component with the
IntersectionVisible
- Provide the options and callbacks you want
Example
;;; // do something // do something // do something { return <IntersectionVisible onIntersect= this onHide= this onShow= this > <div> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div> </IntersectionVisible>; }
Options:
Name | Description |
---|---|
onIntersect | Function that is called when the visibility status of the element change |
onHide | Function that is called when the element becomes invisible |
onShow | Function that is called when the element becomes visible |
options | Object, with the extras options supported by the IntersectionObserver API (root, rootMargin, threshold) |
More about the options here
Contribute
Any pull-request is more than welcome 💥 😄
License
MIT