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

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

 

Download Details:

Author: fkhadra

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/fkhadra/react-on-screen

License: MIT

You Might Be Interested In:

Add Comment