useScrollTracker is a custom React hook that tracks the user's scroll progress on a web page or within a specific container. It returns the current scroll percentage, making it easy to implement features like reading progress bars, infinite scrolling, scroll-based animations, and sticky headers. The hook is lightweight, flexible, and suitable for enhancing user experience in React applications. With built-in support for both window and custom container elements, useScrollTracker helps developers seamlessly integrate scroll-based features into their projects.,
Install the package using npm or yarn:
npm install use-scroll-trackerThe use-scroll-tracker hook can be useful for a variety of scenarios, including:
- Infinite Scrolling: Trigger loading more content when the user reaches a certain scroll percentage.
- Scroll-Triggered Animations: Activate animations or visual effects based on the scroll position.
- Sticky Headers or Footers: Show or hide elements when the user scrolls in a certain direction.
- Progress Indicators: Display a reading progress bar for long articles or documents.
- Scroll Analytics: Track how far users scroll down a page for analytics purposes.
- Tracks scroll percentage and scroll direction (up, down, left, right).
- Supports both vertical and horizontal scrolling.
- Allows custom threshold events to trigger callbacks at specific scroll percentages.
- Works with both window and specific scrollable elements.
- Includes TypeScript type definitions for enhanced development experience.
The useScrollTracker hook returns an object with the following properties:
-
scrollPercentage: The current scroll percentage of the target element. -
scrollDirection: The direction of scrolling. It can be one of the following: up, down, left, right, or null if the direction hasn't changed.
The hook accepts an options object with the following properties:
-
thresholdEvents: An object where keys are scroll percentages and values are callback functions that trigger when the scroll reaches or exceeds the specified percentage. -
horizontalScroll: A boolean to indicate whether the scrolling is horizontal (true) or vertical (false). The default is false (vertical scroll).
Here are some improved examples for using the use-scroll-tracker package with both window objects and HTML elements, along with better CSS styling:
This example demonstrates how to track the scroll progress of the entire window: Live Demo
This example demonstrates how to track the scroll progress of the entire element: Live Demo
If an invalid targetElement is provided (not an HTMLElement or Window), a warning will be logged to the console:
Invalid targetElement provided. Please provide a valid HTMLElement or use the default window.Explore more useful packages by visiting my npm profile. Made with ❤️ by Ashish