feature: added scroll to top button #10174
Conversation
|
Hi @char0n, could you please review my PR or assign someone who can review. |
| const [isVisible, setIsVisible] = useState(false) | ||
| const [hideTimeout, setHideTimeout] = useState(null) | ||
|
|
||
| const styles = { |
There was a problem hiding this comment.
Inline styles are not used in this project, so this code doesn't follow the convention.
There was a problem hiding this comment.
And for the future. Since the styles object doesn’t depend on any props, it’s best to define it outside the component. This avoids redefining the styles object on each render, improving performance.
| }, | ||
| } | ||
|
|
||
| const toggleVisibility = () => { |
There was a problem hiding this comment.
The toggleVisibility function handles both the visibility toggle and timeout reset, which could make the code harder to follow. Consider breaking it up for simplicity: keep the scroll visibility logic and timeout logic separate. Instead of adding this logic directly to that file, consider creating a custom hook. This approach would improve readability and maintain cleaner code.
There was a problem hiding this comment.
Consider improving the variable names for better clarity and readability.
| }, [hideTimeout]) | ||
|
|
||
| return ( | ||
| <div> |
| ) | ||
| } | ||
|
|
||
| export default ScrollToTopButton |
There was a problem hiding this comment.
question - why you prefer default export instead of named export ?
|
|
||
| const ScrollToTopButton = () => { | ||
| const [isVisible, setIsVisible] = useState(false) | ||
| const [hideTimeout, setHideTimeout] = useState(null) |
There was a problem hiding this comment.
consider using useRef insted of useState to store the timeout ID. This way, it will persist across renders without triggering unnecessary re-renders.
| }) | ||
| } | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
You’re adding an event listener to window inside useEffect, which is great, but since toggleVisibility depends on nothing external, it could be defined directly inside useEffect for clarity and potential memory efficiency.
I added a scroll to top button which enhances user experiences by enabling them to quickly go to top of the page when they have many APIs in the page.
Description
I created a component to implement the functionality of the scroll to top and rendered it in the main app. When the user scrolls down the scroll to top icon appears on the bottom right of the page for 3 seconds until the users scrolls again. The button's appearance is consistent with the Swagger UI theme and style.
Fixes #10169
Screenshots (if appropriate):
REC-20241018213544.mp4
My PR contains...
src/is unmodified: changes to documentation, CI, metadata, etc.)package.json)My changes...
Documentation