{"library":"react-intersection-observer","title":"React Intersection Observer","description":"react-intersection-observer is a comprehensive React library that provides hooks and components for efficiently leveraging the browser's Intersection Observer API. It allows developers to monitor when a React component enters or leaves the viewport, enabling features like lazy loading images, implementing infinite scrolling, or triggering animations based on visibility. The current stable version is `10.0.3`, and the project maintains an active release cadence, frequently pushing updates and bug fixes. Key differentiators include its dual API (hooks like `useInView` and `useOnInView`, plus a `<InView>` component), optimized performance through observer instance reuse, native API alignment, robust TypeScript support, and a tiny bundle size (around ~1.15kB for `useInView`). The `useOnInView` hook, introduced in v10, offers a no-re-render alternative for side-effect-heavy workloads like analytics tracking, further enhancing its utility. It also includes comprehensive test utilities for Jest and Vitest.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-intersection-observer"],"cli":null},"imports":["import { useInView } from 'react-intersection-observer';","import { InView } from 'react-intersection-observer';","import { useOnInView } from 'react-intersection-observer';","import type { IntersectionObserverEntry } from 'react-intersection-observer';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { useInView } from 'react-intersection-observer';\n\nconst LazyLoadedImage = ({ src, alt }) => {\n  const { ref, inView } = useInView({\n    triggerOnce: true, // Only trigger once when it enters the viewport\n    threshold: 0.1,    // Trigger when 10% of the element is visible\n  });\n\n  return (\n    <div ref={ref} style={{ height: '300px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#f0f0f0' }}>\n      {inView ? (\n        <img src={src} alt={alt} style={{ maxWidth: '100%', maxHeight: '100%' }} />\n      ) : (\n        <p style={{ color: '#888' }}>Loading image...</p>\n      )}\n    </div>\n  );\n};\n\nconst App = () => {\n  return (\n    <div>\n      <div style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\n        <h1>Scroll Down to See Image</h1>\n      </div>\n      <LazyLoadedImage src=\"https://via.placeholder.com/600x300.png?text=Intersection+Observer\" alt=\"Placeholder Image\" />\n      <div style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\n        <h2>End of Page</h2>\n      </div>\n    </div>\n  );\n};\n\nexport default App;\n","lang":"typescript","description":"This example demonstrates how to use the `useInView` hook to lazy load an image. The image only renders once it enters the viewport, using `triggerOnce` and a `threshold` of 0.1.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}