react-visibility-sensor
Advanced tools
Sensor component for React that notifies you when it goes in or out of the window viewport.
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.
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;
```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.
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.
Sensor component for React that notifies you when it goes in or out of the window viewport.
Sponsored by X-Team
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.
Take a look at the umd example to see this in action
View an example on codesandbox
Or if you'd like to try building an example yourself locally, here's another:
To run the example locally:
npm run build-exampleexample/index.html in a browserGeneral usage goes something like:
const VisibilitySensor = require('react-visibility-sensor');
function onChange (isVisible) {
console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
}
function MyComponent (props) {
return (
<VisibilitySensor onChange={onChange}>
<div>...content goes here...</div>
</VisibilitySensor>
);
}
You can also pass a child function, which can be convenient if you don't need to store the visibility anywhere:
function MyComponent (props) {
return (
<VisibilitySensor>
{({isVisible}) =>
<div>I am {isVisible ? 'visible' : 'invisible'}</div>
}
</VisibilitySensor>
);
}
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.offset: (default {}) with offset you can define amount of px from one side when the visibility should already change. So in example setting offset={{top:10}} means that the visibility changes hidden when there is less than 10px to top of the viewport. Offset works along with partialVisibilityminTopValue: (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) when this is 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 100) 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.scrollThrottle: (default: -1) by specifying a value > -1, you are enabling throttle instead of the delay to trigger checks on scroll event. Throttle supercedes delay.resizeCheck: (default: false) by making this true, the resize listener is enabled. Resize listener only listens to the window.resizeDelay: (default: 250) is the debounce rate at which the check is triggered. Ex: 250ms after the user stopped resizing.resizeThrottle: (default: -1) by specifying a value > -1, you are enabling throttle instead of the delay to trigger checks on resize event. Throttle supercedes delay.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 )children: can be a React element or a function. If you provide a function, it will be called with 1 argument {isVisible: ?boolean, visibilityRect: Object}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.
Special thanks to contributors:
MIT
FAQs
Sensor component for React that notifies you when it goes in or out of the window viewport.
The npm package react-visibility-sensor receives a total of 178,852 weekly downloads. As such, react-visibility-sensor popularity was classified as popular.
We found that react-visibility-sensor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.