😎 Check if your react component are visible on the screen without pain and with performance in mind 😎!
View the demo.
$ npm install --save react-on-screen
$ yarn add react-on-screen
A UMD build is also available :
<script src="./dist/ReactOnScreen.min.js"></script>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 */}
);
}You can use a render props is you want to !
const YourApp = () => {
return (
<TrackVisibility>
{({ isVisible }) => isVisible && <ComponentToTrack />}
</TrackVisibility>
);
}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>
);
}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>
);
}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>
);
}const YourApp = () => {
return (
<TrackVisibility partialVisibility tag="h1">
{({ isVisible }) => <ComponentToTrack />}
</TrackVisibility>
);
}| 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 |
Any contributions is welcome !
- Develop:
$ yarn start - Lint :
$ yarn lint - Test :
$ yarn test - Build :
$ yarn build // will lint and run test before
Licensed under MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent