0
180
ViewsReact imported component is not working completely
I'm really new to React and I've been trying for some time now to make a scroll to top function. Using the existing tutorials and everything on google i've made this component :
Import React, { useState, useEffect } from "react";
export default function ScrollToTop() {
const [isVisible, setIsVisible] = useState(false)
const toggleVisibility = () => {
if(window.pageYOffset > 300) {
setIsVisible(true);
} else {
setIsVisible(false);
}
};
const ScrollToTop = () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
};
useEffect(() => {
window.addEventListener('scroll', toggleVisibility);
return () => {
window.removeEventListener('scroll', toggleVisibility);
};
}, []);
if (!isVisible) {
return false
}
return (
<button className="button" onClick={ScrollToTop}>
<div className="button__arrow button__arrow--up"></div>
</button>
)
};
the problem is that when i import it in the App.js it doesn't work properly, the scrolling part works perfectly, but the button it just stays at bottom of the page instead of appearing after a certain amount of scroll. This is the App.js:
return (
<div>
{loading ? (
<h1>Loading...</h1>
) : (
<>
<Navbar />
<div className="Grid-container">
{pokemonData.map((pokemon, i) => {
return <Card key={i} pokemon={pokemon} />;
})}
</div>
<ScrollToTop/>
</>
)}
</div>
);
}
1 answers
Answer question0
I don't see any overt issues in your ScrollTop implementation that would cause the scroll-to-top button to remain on the page even after scrolling back to the top, but I do see room for optimization.
- For
onScrollevents it's best to use passive listeners. - Invoke
toggleVisibilityonce immediately in the mountinguseEffectto ensure proper initial state. - Apply Boolean Zen to the visibility toggler; Update the
isVisiblestate with the result of the boolean comparison. - Just conditionally render the button in a single return.
Code:
function ScrollToTop() {
const [isVisible, setIsVisible] = useState(false);
const toggleVisibility = () => {
setIsVisible(window.pageYOffset > 300);
};
const ScrollToTop = () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
};
useEffect(() => {
toggleVisibility();
window.addEventListener("scroll", toggleVisibility, { passive: true });
return () => {
window.removeEventListener("scroll", toggleVisibility, { passive: true });
};
}, []);
return isVisible ? (
<button className="button" onClick={ScrollToTop}>
<div className="button__arrow button__arrow--up">TOP</div>
</button>
) : null;
}
If you're still having issues with your implementation and usage try to create a codesandbox that reproduces the issue that we can inspect and debug live.