react-intersection-visible

react intersection visible


Keywords
react, visible, intersection, dom, show, hide, high-order-component, viewport
License
MIT
Install
npm install react-intersection-visible@2.1.0

Documentation

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

Build Status Greenkeeper badge

How to use

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

Example

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 (<IntersectionVisible onIntersect={ e => this.onIntersect( e ) }
                                     onHide={ e => this.onHide( e ) }
                                     onShow={ e => this.onShow( e ) }>
                    <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