brigade/react-waypoint
React Waypoint
react-waypoint ist eine Reihe von React-Komponenten und Wrappern, die entwickelt wurden, um Callbacks auszuführen, wenn bestimmte DOM-Elemente in den sichtbaren Bildschirmbereich eintreten oder diesen verlassen. Es fungiert als Viewport-Visibility-Tracker, der überwacht, wann Elemente vordefinierte räumliche Grenzen überschreiten.
Das Projekt bietet eine Scroll-Trigger-Komponente und einen Event-Wrapper, die benutzerdefinierte Offset-Konfigurationen ermöglichen, um feste UI-Elemente zu berücksichtigen. Diese Tools können so konfiguriert werden, dass sie einen bestimmten DOM-Knoten oder das globale Fenster als scrollbaren Vorfahren für Sichtbarkeitsberechnungen verwenden.
Die Bibliothek deckt verschiedene Implementierungsmuster ab, darunter Infinite Scrolling, Lazy Loading von Inhalten und scroll-getriggerte Animationen. Sie verwaltet diese Aktionen durch Überwachung der Element-Sichtbarkeit und das Auslösen von Funktionen basierend auf der Schnittmenge der Bounding-Box eines Elements und dem aktuellen Viewport.
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.
