thebuilder/react-intersection-observer
React Intersection Observer
react-intersection-observer 是 Intersection Observer API 的 React 实现，旨在跟踪 DOM 元素何时进入或离开浏览器视口。它提供了一个包装器和一组钩子，用于监控元素可见性并在内容对用户可见时触发回调。
该库包含一个 DOM 遮挡检测机制，以确定元素是否被其他组件覆盖或被 CSS 过滤器隐藏。它还具有一个 polyfill 包装器，为不支持 Intersection Observer 功能的浏览器提供可见性回退。
该项目涵盖了各种可见性跟踪功能，包括用于组件重新渲染的状态同步更新，以及无需更新状态即可执行回调的非渲染监控。这些工具支持实现无限滚动、资产懒加载和基于滚动的动画。
Features
- Viewport Observers - Tracks when DOM elements enter or exit the browser viewport to trigger application actions.
- Item Visibility Detection - Determines if a specific UI element is currently visible in the viewport.
- Viewport Visibility Observers - Provides a set of hooks for monitoring element visibility and triggering callbacks.
- Browser API Wrappers - Implements a functional wrapper around the native browser Intersection Observer API.
- Intersection Observer Implementations - Provides a React implementation of the Intersection Observer API for viewport visibility tracking.
- Visibility State Syncing - Synchronizes the native observer callback with React state to trigger component re-renders.
- Event-Driven Callbacks - Executes user-defined functions directly from the observer to avoid unnecessary React state updates.
- DOM Occlusion Detection - Detects if an element is covered by other components or hidden by CSS filters.
- Occlusion Tracking - Tracks whether a DOM element is covered by another element or hidden by filters.
- Infinite Scrolling - Enables the implementation of infinite scrolling by detecting when the user reaches the bottom of a list.
- Ref-Based Measurement - Binds observers to DOM elements using React refs to track visibility and trigger logic.
- Scroll Animations - Triggers visual transitions and animations when elements become visible on the screen.
- Non-Rendering Visibility Monitoring - Executes callbacks upon visibility changes without triggering component state updates for optimized performance.
- Image Lazy Loading - Defers the loading of images and media assets until they enter the browser viewport.
- Browser & DOM Utilities - Intersection Observer API implementation.
- Visibility Reporters - React implementation of the Intersection Observer API.
