@lskjs/react-on-screen

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

Stats

StarsIssuesVersionUpdatedCreatedSize
@lskjs/react-on-screen
002.0.213 years ago3 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

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.