refactor: Enhance ScrollToBottom component with forwardRef for improved functionality

- Updated ScrollToBottom component to use forwardRef, allowing it to accept a ref for better integration with parent components.
- Modified MessagesView to utilize the new ref for the ScrollToBottom button, improving scrolling behavior and performance.
This commit is contained in:
Danny Avila 2025-12-12 20:15:33 -05:00
parent c96f8997fe
commit 20db2394d2
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
2 changed files with 12 additions and 5 deletions

View file

@ -1,12 +1,13 @@
import React from 'react';
import { forwardRef } from 'react';
type Props = {
scrollHandler: React.MouseEventHandler<HTMLButtonElement>;
};
export default function ScrollToBottom({ scrollHandler }: Props) {
const ScrollToBottom = forwardRef<HTMLButtonElement, Props>(({ scrollHandler }, ref) => {
return (
<button
ref={ref}
onClick={scrollHandler}
className="premium-scroll-button absolute bottom-5 right-1/2 cursor-pointer border border-border-light bg-surface-secondary"
aria-label="Scroll to bottom"
@ -22,4 +23,8 @@ export default function ScrollToBottom({ scrollHandler }: Props) {
</svg>
</button>
);
}
});
ScrollToBottom.displayName = 'ScrollToBottom';
export default ScrollToBottom;