Check if a react component in the viewport
Clone or download
Latest commit b3996c2 Oct 30, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Update readme and `tag` Oct 30, 2018
scripts Build library Oct 29, 2017
src Update readme and `tag` Oct 30, 2018
.babelrc Upgrade dependencies Oct 26, 2018
.eslintignore Rewrite test for jest Oct 26, 2017
.eslintrc Update dependencies and test suite Oct 26, 2017
.gitignore Update umb build Apr 3, 2018
.npmignore Rewrite test for jest Oct 26, 2017
.travis.yml Update travis file Oct 26, 2017
LICENSE Update license year Oct 26, 2017
README.md Update readme and `tag` Oct 30, 2018
index.d.ts Update readme and `tag` Oct 30, 2018
package.json 2.1.0 Oct 30, 2018
setupTests.js Rewrite test for jest Oct 26, 2017
webpack.config.dev.js Add playground Oct 28, 2018
webpack.config.js Upgrade dependencies Oct 26, 2018
yarn.lock Add playground Oct 28, 2018

README.md

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>
    );
}

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>
    );
}

Use the html tag of your choice

const YourApp = () => {
    return (
        <TrackVisibility partialVisibility tag="h1">
            {({ 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 one or many react components
style object - Style attributes
className string - Css classes
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
tag string div Allows specifying html tag of your choice

Contributions

Any contributions is welcome !

  • Develop: $ yarn start
  • Lint : $ yarn lint
  • Test : $ yarn test
  • Build : $ yarn build // will lint and run test before

License

Licensed under MIT