react-on-screen

React on screen

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

• React on screen
  • Demo
  • Installation
  • Usage
    • Simple
    • Using a render props
    • Track the visibility only once
    • Defining offset
    • Partial visibility
    • Use the html tag of your choice
  • Api
  • Contributions
  • 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>
    );
}

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