Hooks > useScrollProgress #82
Conversation
There was a problem hiding this comment.
Good push on this! I left some comments with suggestions on how we can take this to the next level.
In case you didn't already know, motion's useScroll hook also allows you to measure horizontal scroll progress. It might be a good reference on how to structure and improve this hook.
| type ScrollProgressCallback = ( | ||
| scrollLeft: number, | ||
| width: number, | ||
| scrollWidth: number, | ||
| progress: number | ||
| ) => void; |
There was a problem hiding this comment.
The structure of these arguments should be rethought. If I want to get to the progress — arguably the most useful argument — I have type out (scrollLeft, width, scrollWidth, progress) => {}, with three of those being unused variables.
| ### Basic Usage | ||
|
|
||
| ```tsx | ||
| useScrollProgress( | ||
| carouselRef, | ||
| (scrollLeft, width, scrollWidth, progress) => { | ||
| if (progressLineRef.current) { | ||
| progressLineRef.current.style.width = `${progress * 100}%`; | ||
| } | ||
| } | ||
| ); | ||
| ``` | ||
|
|
||
| ### Custom Proportional Scroll Behavior | ||
|
|
||
| ```tsx | ||
| useScrollProgress( | ||
| carouselRef, | ||
| (scrollLeft, width, scrollWidth, progress) => { | ||
| if (progressLineRef.current) { | ||
| progressLineRef.current.style.width = `${(width / scrollWidth + scrollLeft / scrollWidth) * 100}%`; | ||
| } | ||
| } | ||
| ); | ||
| ``` |
There was a problem hiding this comment.
I think it would be more useful to have a runnable preview here, instead of just code snippets.
|
|
||
| --- | ||
|
|
||
| ## Usage Examples |
There was a problem hiding this comment.
| ## Usage Examples | |
| ## Examples |
More inline with the remaining docs.
| - `scrollWidth` (`number`): The total scrollable width of the element. | ||
| - `progress` (`number`): A value between `0` and `1`, representing the scroll progress. | ||
|
|
||
| This allows you to handle scrolling declaratively with state updates or imperatively using the callback for optimized performance. |
There was a problem hiding this comment.
I'm not sure if it's a good idea to have scroll progress directly set react state. With how fast scroll (and resize) event listeners trigger, it might cause significant performance issues and therefore be an easy way for a developer to shoot himself in the foot.
If we are to keep the react state, besides documenting potential performance implications, we should throttle the scroll listener and debounce the resize listener.
There was a problem hiding this comment.
Since this only tracks horizontal scroll, I suggest we rename the hook to reflect that (e.g. useHorizontalScrollProgress). However, it would be far more interesting to implement support for tracking progress in both axis, which is something motion's hook does: https://motion.dev/docs/react-use-scroll
| definition={{ | ||
| ref: { | ||
| type: "React.RefObject<HTMLDivElement>", | ||
| description: "A reference to the element being tracked for scroll progress.", |
There was a problem hiding this comment.
| description: "A reference to the element being tracked for scroll progress.", | |
| description: "A reference to the element being tracked for scroll progress.", | |
| required: true |
Changes made in this PR:
useScrollProgresshook;