wannadream / react-intersection-visible Goto Github PK

View Code? Open in Web Editor NEW

HOC to track when a component enters the visible viewport.

JavaScript 15.58% HTML 2.73% CSS 0.63% TypeScript 81.06%

react-intersection-visible's Introduction

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

How to use

Import IntersectionVisible hoc component
Wrap your main component with the IntersectionVisible
Provide the options and callbacks you want
Customize ratio of visibility for triggering onShow() event handler

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 ) }
                                     ratioOfOnShow={75}>
                    <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)
ratioOfOnShow	Number, customize the ratio of element visibility for triggering onShow() event handler.