Sensor component for React that notifies you when it goes in or out of the window viewport.
npm install react-visibility-sensor
Useful if you want to use with bower, or in a plain old <script> tag.
In this case, make sure that React and ReactDOM are already loaded and globally accessible.
- Plain: https://npmcdn.com/[email protected]/dist/visibility-sensor.js
- Minified https://npmcdn.com/[email protected]/dist/visibility-sensor.min.js
Take a look at the umd example to see this in action
To run the example locally:
npm run build-example- open
example/index.htmlin a browser
General usage goes something like:
function render () {
var VisibilitySensor = require('react-visibility-sensor');
var onChange = function (isVisible) {
console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
};
return (
<VisibilitySensor onChange={onChange} />
);
}
onChange: callback for whenever the element changes from being within the window viewport or not. Function is called with 1 argument(isVisible: boolean)active: (defaulttrue) boolean flag for enabling / disabling the sensor. Whenactive !== truethe sensor will not fire theonChangecallback.partialVisibility: (defaultfalse) consider element visible if only part of it is visible.minTopValue: (defaultfalse) consider element visible if only part of it is visible and a minimum amount of pixels could be set, so if at least 100px are in viewport, we mark element as visible.delay: (default1000) integer, number of milliseconds between checking the element's position in relation the the window viewport. Making this number too low will have a negative impact on performance.containment: (optional) element to use as a viewport when checking visibility. Default behaviour is to use the browser window as viewport.delayedCall: (defaultfalse) if is set to true, wont execute on page load ( prevents react apps triggering elements as visible before styles are loaded )
Special thanks to contributors:
MIT