Sensor component for React that notifies you when it goes in or out of the window viewport.
npm install react-visibility-sensor
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} />
);
}
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.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.className
: (optional) className for the sensor element.style
: (optional) style object for the sensor element.
Special thanks to contributors:
MIT