brigade/react-waypoint
React Waypoint
react-waypoint es un conjunto de componentes y wrappers de React diseñados para ejecutar callbacks cuando elementos específicos del DOM entran o salen del área visible de la pantalla. Funciona como un rastreador de visibilidad del viewport que monitorea cuándo los elementos cruzan límites espaciales predefinidos.
El proyecto proporciona un componente de disparo de scroll y un wrapper de eventos que permiten configuraciones de desplazamiento personalizadas para tener en cuenta elementos de UI fijos. Estas herramientas pueden configurarse para usar un nodo DOM específico o la ventana global como el ancestro desplazable para los cálculos de visibilidad.
La biblioteca cubre varios patrones de implementación, incluyendo scroll infinito, carga diferida de contenido y animaciones disparadas por scroll. Gestiona estas acciones monitoreando la visibilidad del elemento y disparando funciones basadas en la intersección de la caja delimitadora del elemento y el viewport actual.
Features
- Scroll Wrapper Components - Provides React wrappers that trigger actions based on element position relative to the window during scrolling.
- Spatial Trigger Callbacks - Provides callbacks that execute when DOM elements enter or exit predefined spatial zones in the viewport.
- Scroll-Position Event Triggers - Fires events when the scroll position reaches specific markers, enabling viewport-based UI changes.
- Visibility Trigger Components - Provides a React component that executes a callback function when an element enters or leaves the visible area.
- Element Visibility Detection - Triggers callbacks when specific UI elements enter or exit the browser viewport during scrolling.
- Viewport Trackers - Tracks element visibility and position within the browser viewport to trigger dynamic updates.
- Intersection Observer Wrappers - Implements a wrapper around the native Intersection Observer API to simplify element visibility detection.
- Viewport Offset Calculators - Calculates viewport edge offsets to determine visibility thresholds, accounting for fixed UI elements.
- Infinite Scroll Implementations - Enables infinite scroll workflows by automatically fetching and appending data as users scroll to the end.
- Ref-Based Measurement - Uses direct DOM references to measure element position and visibility for triggering callbacks.
- Scroll Animations - Triggers visual transitions and animations based on an element's visibility within the viewport.
- Visibility Trigger Configurators - Configures top and bottom offsets to adjust the trigger points for element visibility.
- Visibility Tracking - Binds visibility detection to specific scrollable containers or the global window.
- Scroll Event Controllers - Monitors scroll events on specific DOM containers or the window to control UI states.
- Image Lazy Loading - Supports lazy loading by deferring the retrieval of images or data until they enter the viewport.
- Visibility Reporters - Executes functions based on scroll position.
