civiccc/react-waypoint
React Waypoint
react-waypoint es un componente de React y herramienta de seguimiento de viewport que ejecuta funciones basadas en la visibilidad de un nodo DOM dentro de un área desplazable. Monitorea cuándo los elementos entran o salen del viewport del navegador o de un contenedor de scroll especificado para disparar callbacks.
El proyecto permite la implementación de scroll infinito, carga diferida de activos y animaciones disparadas por scroll. Permite definiciones de contenedores de scroll personalizados y configuraciones de límites de viewport usando offsets para determinar exactamente cuándo se disparan los eventos.
La herramienta proporciona seguimiento de posición de elementos y monitoreo de visibilidad tanto para scroll vertical como horizontal. Incluye control de sensibilidad de disparo y limitación de eventos para gestionar la ejecución de callbacks durante el scroll rápido.
Features
- Intersection Trigger Components - Provides a React component that executes functions based on the visibility of a DOM node within a scrollable area.
- State Lifecycle Callbacks - Provides callbacks that execute automatically when elements enter or exit the viewport state.
- Viewport Boundary Triggers - Triggers events specifically when UI elements cross the boundary of the visible viewport.
- Viewport Relative Tracking - Monitors real-time element positions relative to the viewport to automate lazy loading and infinite scrolling.
- Visibility Trigger Components - Offers a specialized React component that triggers callbacks when its associated element enters or leaves the viewport.
- Viewport Intersection Calculations - Calculates element visibility by comparing the bounding client rectangle against the container's dimensions.
- Element Visibility Detection - Monitors specific nodes to fire events when they enter or completely exit the visible viewport.
- Infinite Scroll Implementations - Enables the implementation of infinite scrolling by triggering data loads when elements reach the bottom of a list.
- Viewport Visibility Observers - Monitors when elements enter or leave the user's field of view to trigger UI updates and events.
- Intersection Observer Implementations - Uses the IntersectionObserver API to asynchronously detect when elements enter or exit the viewport.
- Image Lazy Loading - Facilitates lazy loading of assets by delaying their fetch until they enter the viewport.
- Viewport Action Triggers - Initiates specific actions, such as loading more content, based on the visibility of elements within the viewport.
- Scroll-Triggered Animations - Triggers visual animations and effects exactly when a specific element becomes visible during scrolling.
- Custom Scroll Triggers - Executes custom JavaScript functions based on element positions relative to specified scroll containers.
- Step Enter-Exit Callbacks - Fires user-defined callbacks when elements cross configurable viewport thresholds during vertical or horizontal scrolling.
- Trigger Sensitivity Controls - Provides custom offsets and throttling handlers to precisely control when visibility callbacks are executed during scrolling.
- UI Event Throttling - Throttles high-frequency scroll events to maintain performance and prevent redundant callback triggers.
