thebuilder/react-intersection-observer

This is a React library that tells you when a specific element on a webpage scrolls into or out of the visible area of the screen. The visible area is called the viewport, and knowing when something enters or leaves it is useful for many common web features: loading images only when they are about to be seen, triggering animations as the user scrolls, tracking whether an advertisement actually appeared on screen, or pausing a video when it scrolls away. The library wraps a built-in browser feature called the Intersection Observer API, which handles the detection work. The library's job is to make that browser feature easy to use from React code. It offers three ways to use it: a hook called useInView that returns whether an element is currently visible, a hook called useOnInView that calls a function whenever visibility changes (without causing the component to re-render, which is useful for performance), and a component called InView that works in the older React render-props style. The useInView hook is the most common entry point. You attach a ref (a reference pointer) from the hook to whichever HTML element you want to watch, and the hook gives you back a true or false value indicating whether that element is currently on screen. You can also get the full intersection data from the browser if you need details like how much of the element is visible. The bundle size is small, around 1 to 1.6 kilobytes depending on which parts you import. It reuses observer instances when multiple elements are being watched simultaneously to avoid redundant overhead. It also includes support for mocking the observer in automated tests, which the standard browser API does not provide out of the box. The library is written in TypeScript and published as an npm package. It is tree-shakeable, meaning bundlers can exclude the parts your project does not use.