š Check if your react component are visible on the screen without pain and with performance in mind š!
A UMD build is also available :
- React on screen !npm() !npm() !license()
- [Demo](#demo)
- [Installation](#installation)
- [Usage](#usage)
- [Simple](#simple)
- [Using a render props](#using-a-render-props)
- [Track the visibility only once](#track-the-visibility-only-once)
- [Defining offset](#defining-offset)
- [Partial visibility](#partial-visibility)
- [Use the html tag of your choice](#use-the-html-tag-of-your-choice)
- [Api](#api)
- [Contributions](#contributions)
- [License](#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
Usingoffset
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 thepartialVisibility
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 totrue
|
|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
``