What is react-visibility-sensor?
The react-visibility-sensor package is a React component that allows you to detect when a component is visible on the screen. This can be useful for lazy loading images, triggering animations, or tracking user interactions.
What are react-visibility-sensor's main functionalities?
Basic Visibility Detection
This feature allows you to detect when a component becomes visible or hidden. The `onChange` callback is triggered with a boolean value indicating the visibility state.
```jsx
import React from 'react';
import VisibilitySensor from 'react-visibility-sensor';
class MyComponent extends React.Component {
onChange = (isVisible) => {
console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
};
render() {
return (
<VisibilitySensor onChange={this.onChange}>
<div>
This is my content
</div>
</VisibilitySensor>
);
}
}
export default MyComponent;
```
Partial Visibility Detection
This feature allows you to detect partial visibility of a component. By setting the `partialVisibility` prop, the `onChange` callback will be triggered even if only part of the component is visible.
```jsx
import React from 'react';
import VisibilitySensor from 'react-visibility-sensor';
class MyComponent extends React.Component {
onChange = (isVisible) => {
console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
};
render() {
return (
<VisibilitySensor onChange={this.onChange} partialVisibility>
<div>
This is my content
</div>
</VisibilitySensor>
);
}
}
export default MyComponent;
```
Delayed Visibility Detection
This feature allows you to add a delay before the visibility change is detected. By setting the `delay` prop, the `onChange` callback will be triggered after the specified delay in milliseconds.
```jsx
import React from 'react';
import VisibilitySensor from 'react-visibility-sensor';
class MyComponent extends React.Component {
onChange = (isVisible) => {
console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
};
render() {
return (
<VisibilitySensor onChange={this.onChange} delay={500}>
<div>
This is my content
</div>
</VisibilitySensor>
);
}
}
export default MyComponent;
```
Other packages similar to react-visibility-sensor
react-intersection-observer
The react-intersection-observer package provides a React implementation of the Intersection Observer API, which allows you to observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. It is more flexible and performant compared to react-visibility-sensor, especially for complex visibility detection scenarios.
react-waypoint
The react-waypoint package allows you to execute a function whenever you scroll to an element. It is useful for triggering animations or loading content as the user scrolls. Compared to react-visibility-sensor, react-waypoint is more focused on scroll-based triggers and offers more control over when the callbacks are fired.
React Visibility Sensor
![Build Status](https://secure.travis-ci.org/joshwnj/react-visibility-sensor.png)
Sensor component for React that notifies you when it goes in or out of the window viewport.
Install
npm install react-visibility-sensor
Including the script directly
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.
Take a look at the umd example to see this in action
Example
View the 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
: (default true
) boolean flag for enabling / disabling the sensor. When active !== true
the sensor will not fire the onChange
callback.partialVisibility
: (default false
) consider element visible if only part of it is visible. Also possible values are - 'top', 'right', 'bottom', 'left' - in case it's needed to detect when one of these become visible explicitly.minTopValue
: (default 0
) 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.intervalCheck
: (default true
) the default usage of Visibility Sensor is to trigger a check on user scrolling, by checking this as true, it gives you the possibility to check if the element is in view even if it wasn't because of a user scrollintervalDelay
: (default 1500
) 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.scrollCheck
: (default: false
) by making this true, the scroll listener is enabled.scrollDelay
: (default: 250
) is the debounce rate at which the check is triggered. Ex: 250ms after the user stopped scrolling.containment
: (optional) element to use as a viewport when checking visibility. Default behaviour is to use the browser window as viewport.delayedCall
: (default false
) if is set to true, wont execute on page load ( prevents react apps triggering elements as visible before styles are loaded )
It's possible to use both intervalCheck
and scrollCheck
together. This means you can detect most visibility changes quickly with scrollCheck
, and an intervalCheck
with a higher intervalDelay
will act as a fallback for other visibility events, such as resize of a container.
Thanks
Special thanks to contributors:
License
MIT