-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Add onOverflowChange
callback to ScrollArea.Autosize
#7972
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add onOverflowChange
callback to ScrollArea.Autosize
#7972
Conversation
|
||
useEffect(() => { | ||
const el = viewportObserverRef.current; | ||
if (!el) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This logic might have a significant impact on performance, add early return if onOverflowChange is not a function
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done, I also refactored it to use the useResizeObserver
hook.
|
||
// Overflow detection (Autosize-only) | ||
const [resizeObserverRef, rect] = useResizeObserver<HTMLDivElement>(); | ||
const combinedViewportRef = useMergeRefs([viewportRef, resizeObserverRef]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not a good solution: adds significant overhead with resize observer tracking when onOverflowChange
is not passed. ResizeObserver must only listen for changes when it is required.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point - I reverted the last two commits and added the early return guard.
Thanks! |
This PR adds a new
onOverflowChange?: (overflowing: boolean) => void
prop to ScrollArea.Autosize.It fires when content starts or stops exceeding max-height, enabling consumers to react when the container becomes scrollable.
95208be5a7182e7515d9a6eca68051df.mp4