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

Category: Others , React | December 12, 2017
Author: fkhadra
Views Total: 264
Official Page: Go to website
Last Update: December 12, 2017
License: MIT

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:

react-on-screen