Check If Component Is In Viewport – react-on-screen

Description:

React on Screen allows you to check if react components are visible on the screen with performance in mind.

Installation:

# Yarn
$ yarn add react-on-screen
# NPM
$ npm install react-on-screen --save

Basic usage:

import React from 'react';
import TrackVisibility from 'react-on-screen';
const ComponentToTrack = ({ isVisible }) => {
    const style = {
        background: isVisible ? 'red' : 'blue'
    };
    return <div style={style}>Hello World</div>;
}
const YourApp = () => {
    return (
       {/* Some Stuff */}
        <TrackVisibility>
            <ComponentToTrack />
        </TrackVisibility>
       {/* Some Stuff */}
    );
}

Default props.

{
  once: false,
  throttleInterval: 150,
  style: null,
  className: null,
  offset: 0,
  children: null,
  partialVisibility: false
};

Preview: