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

Demo

 

$3

1. Import IntersectionVisible hoc component
2. Wrap your main component with the IntersectionVisible
3. Provide the options and callbacks you want

$3

``javascript
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import IntersectionVisible from 'react-intersection-visible';

class YourComponent extends Component
{

onHide( entries )
{
// do something
}

onShow( entries )
{
// do something
}

onIntersect( entries )
{
// do something
}

render(){
return ( this.onIntersect( e ) }
onHide={ e => this.onHide( e ) }
onShow={ e => this.onShow( e ) }>


);
}
}

``

$3

| 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

$3

Any pull-request is more than welcome :boom: :smile:

$3

MIT