@lskjs/react-on-screen

A wrapper component to track if your react component is visible on screen

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@lskjs/react-on-screen
2.0.214 years ago4 years agoMinified + gzip package size for @lskjs/react-on-screen in KB

Readme

React on screen npm() npm() license() Coverage Status
šŸ˜Ž Check if your react component are visible on the screen without pain and with performance in mind šŸ˜Ž!
react-on-screen-demo
+ Simple + Using a render props + Using custom container + Track the visibility only once + Defining offset + Partial visibility

Demo

View the demo.

Installation

$ npm install --save react-on-screen
$ yarn add react-on-screen

A UMD build is also available :
<script src="./dist/ReactOnScreen.min.js"></script>

Usage

Simple

import React from 'react';
import TrackVisibility from 'react-on-screen';

const ComponentToTrack = ({ isVisible }) => {
    const style = {
        background: isVisible ? 'red' : 'blue'
    };
    return <div style={style}>Hello</div>;
}

const YourApp = () => {
    return (
       {/* Some Stuff */}
        <TrackVisibility>
            <ComponentToTrack />
        </TrackVisibility>
       {/* Some Stuff */}
    );
}

Using a render props

You can use a render props is you want to !
const YourApp = () => {
    return (
        <TrackVisibility>
            {({ isVisible }) => isVisible && <ComponentToTrack />}
        </TrackVisibility>
    );
}

Using custom container

const YourApp = () => {
    return (
        <TrackVisibility container={refContainer}>
            <ComponentToTrack />
        </TrackVisibility>
    );
}

Track the visibility only once

For many cases you may want to track the visibility only once. This can be done simply as follow :
const YourApp = () => {
    return (
        <TrackVisibility once>
            <ComponentToTrack />
        </TrackVisibility>
    );
}

Defining offset

Using offset props can be usefull if you want to lazy load an image for instance.
const YourApp = () => {
    return (
        <TrackVisibility offset={1000}>
            {({ isVisible }) => isVisible ? <ComponentToTrack /> : <Loading />}
        </TrackVisibility>
    );
}

Partial visibility

You may want to consider that a component is visible as soon as a part of the component is visible on screen. You can use the partialVisibility props for that.
const YourApp = () => {
    return (
        <TrackVisibility partialVisibility>
            {({ isVisible }) => <ComponentToTrack />}
        </TrackVisibility>
    );
}

Api

|props |type |default|description| |----------------|----------------|-------|-----------| |once |bool |false|If set to true track the visibility only once and remove the event listeners| |throttleInterval|int |150|Tweak the event listeners. See David Corbacho's article| |children |React Components| - |Can be on or many react components| |style |object | - |Style attributes| |className |string | - |Css classes| |container |React Ref |window|Custom ref container| |offset |number | 0 |Allows you to specify how far left or above of the viewport you want to set isVisible to true| |partialVisibility|bool |false|Set isVisible to true on element as soon as any part is in the viewport|

Contributions

Any contributions is welcome !
  • Lint : `` $ npm run lint `
  • Test : ` $ npm run test `
  • Build : ` $ npm run build // will lint and run test before ``

Release Notes

v2.0.4

  • Recalculate on props change.

v2.0.2

  • Add check for component bottom up to stop whole page being visible
  • Push componentDidMount isComponentVisible call into next tick

v2.0.1

  • Fix issue #9. The component was not updated on prop changes

v2.0.0

  • Added support for partial visibility. Thanks to audiolion
  • Internal rewrite
  • CI intregration
  • Better Test suite
  • Typescript definition !

v1.1.4

  • React and react-dom are now peer dependencies

v1.1.1

  • switched to webpack2
  • Upgraded to stand alone prop-types

License

Licensed under MIT