{"library":"react-intersection-observer-hook","title":"React Intersection Observer Hook","description":"The `react-intersection-observer-hook` package provides declarative React hooks, specifically `useIntersectionObserver` and `useTrackVisibility`, to interact with the browser's native Intersection Observer API. It simplifies detecting when a React component enters or exits the viewport, enabling features like lazy loading, infinite scrolling, and triggering animations. The current stable version is 4.0.2, with active development focusing on modern React compatibility, demonstrated by its recent update for React 19 in v4.0.0. Releases are frequent, addressing bugs and improving API ergonomics. Key differentiators include a dedicated `useTrackVisibility` for simpler boolean visibility checks, explicit `rootRef` handling for scrollable containers, and robust support for both ES Modules and CommonJS environments since v3.0.0, ensured through modern bundling practices.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-intersection-observer-hook"],"cli":null},"imports":["import { useIntersectionObserver } from 'react-intersection-observer-hook';","import { useTrackVisibility } from 'react-intersection-observer-hook';","import type { IntersectionObserverHookArgs } from 'react-intersection-observer-hook';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { useTrackVisibility } from 'react-intersection-observer-hook';\n\nfunction MyTrackedComponent() {\n  const [ref, { isVisible, entry, rootRef }] = useTrackVisibility({\n    // Optionally, track visibility only once\n    // once: true,\n    // Customize intersection threshold (0.0 to 1.0)\n    threshold: 0.5,\n    // Add margin around the root (e.g., '10px 20px 30px 40px')\n    // rootMargin: '0px 0px -50px 0px',\n  });\n\n  // For a scrollable container (e.g., div with overflow-y: scroll),\n  // attach rootRef to the container. Otherwise, it defaults to the viewport.\n  const ScrollableContainer = React.forwardRef((props, forwardedRef) => (\n    <div ref={forwardedRef} style={{ height: '300px', overflowY: 'scroll', border: '1px solid gray' }}>\n      {props.children}\n    </div>\n  ));\n\n  return (\n    <div style={{ height: '1000px', padding: '200px 0' }}>\n      <p>Scroll down to see the tracked element.</p>\n      <ScrollableContainer ref={rootRef}>\n        <div style={{ height: '400px', background: 'lightblue', margin: '100px 0' }}></div>\n        <div ref={ref} style={{ height: '200px', background: isVisible ? 'lightgreen' : 'lightcoral', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\n          <h2>Element is {isVisible ? 'visible!' : 'not visible.'}</h2>\n          {entry && <p>Intersection Ratio: {entry.intersectionRatio.toFixed(2)}</p>}\n        </div>\n        <div style={{ height: '400px', background: 'lightblue', margin: '100px 0' }}></div>\n      </ScrollableContainer>\n    </div>\n  );\n}\n\nexport default MyTrackedComponent;\n","lang":"typescript","description":"This example demonstrates how to use `useTrackVisibility` to detect when a component enters or leaves the viewport, changing its background color. It also shows how to specify a custom scrollable container using `rootRef`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}