brigade/react-waypoint
React Waypoint
react-waypoint is a set of React components and wrappers designed to execute callbacks when specific DOM elements enter or exit the visible screen area. It functions as a viewport visibility tracker that monitors when elements cross predefined spatial boundaries.
The project provides a scroll trigger component and event wrapper that allow for custom offset configurations to account for fixed UI elements. These tools can be configured to use a specific DOM node or the global window as the scrollable ancestor for visibility calculations.
The library covers several implementation patterns, including infinite scrolling, lazy loading of content, and scroll-triggered animations. It manages these actions by monitoring element visibility and triggering functions based on the intersection of an element's bounding box and the current 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.
