civiccc/react-waypoint
React Waypoint
react-waypoint is a React component and viewport tracking tool that executes functions based on the visibility of a DOM node within a scrollable area. It monitors when elements enter or leave the browser viewport or a specified scroll container to trigger callbacks.
The project enables the implementation of infinite scrolling, asset lazy loading, and scroll-triggered animations. It allows for custom scroll container definitions and viewport boundary configurations using offsets to determine exactly when events fire.
The tool provides element position tracking and visibility monitoring for both vertical and horizontal scrolling. It includes trigger sensitivity control and event throttling to manage callback execution during rapid scrolling.
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.
Star history
How this analysis was created: This summary and feature list were written by an AI model that read the project's README and public documentation pages. Each feature links to the documentation it came from; stars, license and language come straight from the GitHub API. The model does not read the source code, and the analysis is refreshed when the project is re-analysed. Learn more on our About page.
