React Visibility Sensor
Sensor component for React that notifies you when it goes in or out of the window viewport.
Install
npm install react-visibility-sensor
Example
To run the example locally:
npm run build-example
- open
example/index.html
in 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} />
);
}
Props
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 !== true
the sensor will not fire theonChange
callback.partialVisibility
: (defaultfalse
) consider element visible if only part of it is 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.
Thanks
Special thanks to contributors:
License
MIT