@lskjs/react-on-screen

React on screen

😎 Check if your react component are visible on the screen without pain and with performance in mind 😎!

• Demo
• Installation
• Usage
  • Simple
  • Using a render props
  • Using custom container
  • Track the visibility only once
  • Defining offset
  • Partial visibility
• Api
• Contributions
• Release Notes
• License

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