From 613bb1772bad3476737cf66dc7c42552a680c594 Mon Sep 17 00:00:00 2001 From: Spandan Barve Date: Tue, 10 Oct 2023 18:45:35 +0530 Subject: [PATCH] bugfix, indefinite eventlistener --- .../src/pages/HomePage/components/HowItWorks.jsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/website/src/pages/HomePage/components/HowItWorks.jsx b/website/src/pages/HomePage/components/HowItWorks.jsx index 2690d466e..1d0f8360c 100644 --- a/website/src/pages/HomePage/components/HowItWorks.jsx +++ b/website/src/pages/HomePage/components/HowItWorks.jsx @@ -41,12 +41,16 @@ function HowItWorksCard(props) { const cardRef = useRef(); const glowRef = useRef(); + function glowWithMouse(event) { + const cardRect = cardRef.current.getBoundingClientRect(); + glowRef.current.style.setProperty("--x", `${event.x - cardRect.x}px`); + glowRef.current.style.setProperty("--y", `${event.y - cardRect.y}px`); + } + useEffect(() => { - window.addEventListener("mousemove", (event) => { - const cardRect = cardRef.current.getBoundingClientRect(); - glowRef.current.style.setProperty("--x", `${event.x - cardRect.x}px`); - glowRef.current.style.setProperty("--y", `${event.y - cardRect.y}px`); - }); + window.addEventListener("mousemove", glowWithMouse); + + return () => window.removeEventListener("mousemove", glowWithMouse); }, []); return (