react-visibility-sensor
Sensor component for React that notifies you when it goes in or out of the window viewport.
Top Related Projects
React component for the Intersection <Observer /> API
Quick Overview
React Visibility Sensor is a React component that detects when an element enters or leaves the viewport. It provides a simple way to track the visibility of elements on a page, which can be useful for implementing lazy loading, infinite scrolling, or triggering animations when elements come into view.
Pros
- Easy to integrate with existing React applications
- Highly customizable with various configuration options
- Supports both function and class components
- Lightweight and has minimal dependencies
Cons
- May have performance implications if used excessively on a single page
- Requires careful consideration of re-render cycles to avoid unnecessary updates
- Limited browser support for older versions (IE11 and below)
- Documentation could be more comprehensive
Code Examples
- Basic usage:
import React from 'react';
import VisibilitySensor from 'react-visibility-sensor';
function MyComponent() {
return (
<VisibilitySensor>
{({ isVisible }) => (
<div>{isVisible ? 'Element is visible' : 'Element is not visible'}</div>
)}
</VisibilitySensor>
);
}
- Using with custom options:
<VisibilitySensor
partialVisibility
offset={{ top: 100, bottom: 100 }}
onChange={(isVisible) => console.log('Element visibility:', isVisible)}
>
{({ isVisible }) => (
<div>{isVisible ? 'Partially visible' : 'Not visible'}</div>
)}
</VisibilitySensor>
- Implementing lazy loading:
function LazyImage({ src, alt }) {
const [isLoaded, setIsLoaded] = React.useState(false);
return (
<VisibilitySensor>
{({ isVisible }) => (
<div>
{isVisible && !isLoaded && (
<img
src={src}
alt={alt}
onLoad={() => setIsLoaded(true)}
style={{ display: 'none' }}
/>
)}
{isLoaded ? (
<img src={src} alt={alt} />
) : (
<div>Loading...</div>
)}
</div>
)}
</VisibilitySensor>
);
}
Getting Started
-
Install the package:
npm install react-visibility-sensor
-
Import and use in your React component:
import React from 'react'; import VisibilitySensor from 'react-visibility-sensor'; function MyComponent() { return ( <VisibilitySensor> {({ isVisible }) => ( <div> {isVisible ? 'I am visible' : 'I am not visible'} </div> )} </VisibilitySensor> ); } export default MyComponent;
-
Customize the component behavior using props as needed.
Competitor Comparisons
React component for the Intersection <Observer /> API
Pros of react-intersection-observer
- Uses the modern Intersection Observer API, which is more performant than scroll events
- Supports TypeScript out of the box
- Provides more options for customization, such as root margin and threshold
Cons of react-intersection-observer
- Slightly larger bundle size due to additional features
- May require a polyfill for older browsers that don't support Intersection Observer API
Code Comparison
react-visibility-sensor:
<VisibilitySensor onChange={handleVisibilityChange}>
{({ isVisible }) => (
<div>{isVisible ? 'Visible' : 'Not visible'}</div>
)}
</VisibilitySensor>
react-intersection-observer:
const [ref, inView] = useInView({
threshold: 0,
});
return <div ref={ref}>{inView ? 'Visible' : 'Not visible'}</div>;
Both libraries provide similar functionality for detecting element visibility, but react-intersection-observer offers a more modern approach with its use of the Intersection Observer API. This results in better performance, especially for scenarios with many observed elements. react-visibility-sensor, while simpler, relies on scroll events which can be less efficient.
react-intersection-observer also provides more flexibility with its configuration options and TypeScript support, making it a better choice for complex projects or those using TypeScript. However, it may require a polyfill for older browsers, which could increase the overall bundle size.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
React Visibility Sensor
Sensor component for React that notifies you when it goes in or out of the window viewport.
Sponsored by X-Team
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.
- Plain: https://unpkg.com/react-visibility-sensor@5.0.1/dist/visibility-sensor.js
- Minified https://unpkg.com/react-visibility-sensor@5.0.1/dist/visibility-sensor.min.js
Take a look at the umd example to see this in action
Example
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-example
- open
example/index.html
in a browser
General 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>
);
}
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. 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 settingoffset={{top:10}}
means that the visibility changes hidden when there is less than 10px to top of the viewport. Offset works along withpartialVisibility
minTopValue
: (default0
) 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
: (defaulttrue
) 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
: (default100
) 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
: (defaultfalse
) 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.
Thanks
Special thanks to contributors
License
MIT
Top Related Projects
React component for the Intersection <Observer /> API
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot