react-on-screen-extended
v2.0.5
Published
A wrapper component to track if your react component is visible on screen
Downloads
4
Maintainers
Readme
React on screen
😎 Check if your react component are visible on the screen without pain and with performance in mind 😎!
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>
);
}
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|
|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