React Intersection Observer
react-intersection-observer
Monitor if a component is inside the viewport, using IntersectionObserver API
Hooks
react
component
hooks
viewport
intersection
observer
lazy load
inview
useInView
useIntersectionObserver
Stars
5.5k
Weekly
4.3M
Open issues
0
Bundle
~25 kB
Installation
npm install react-intersection-observerCode example
import { useIntersectionObserver } from "react-intersection-observer";
export function Example() {
const value = useIntersectionObserver();
return <p>{String(value)}</p>;
}Pros & cons
Pros
- Actively maintained by Daniel Schmidt
- 4.3M weekly downloads. Battle tested
- First-class TypeScript definitions
- MIT licensed
Considerations
- Adds roughly ~25 kB to your bundle
- Needs client-only rendering in SSR frameworks
- Not supported in React Native
- 0 open issues on GitHub