feat: update scroll to top with better logic

src/components/ScrollToTop.jsx

@@ -2,13 +2,13 @@ import React, { useState } from 'react'
 import { animateScroll } from 'react-scroll'
 
 import Icon from './Icon'
-import { useScrollPosition } from '../hooks/use-scroll-position'
+import { useScroll } from '../hooks/use-window'
 
 const ScrollToTop = () => {
   const [visible, setVisibility] = useState(false)
 
-  useScrollPosition(({ currPos }) => {
-    if (currPos.y < -600) {
+  useScroll(({ top }) => {
+    if (top > 600) {
       setVisibility(true)
     } else {
       setVisibility(false)
@@ -31,7 +31,7 @@ const ScrollToTop = () => {
       tabIndex="0"
       role="button"
     >
-      <Icon name="arrow-top" />
+      <Icon name="arrow-up" />
     </div>
   )
 }

src/hooks/use-window.js

@@ -0,0 +1,35 @@
+import { useLayoutEffect } from 'react'
+import debounce from 'lodash/debounce'
+
+const isBrowser = typeof window !== `undefined`
+
+function getBoundingRect() {
+  if (!isBrowser) return { left: 0, top: 0, width: 0, height: 0 }
+
+  return {
+    left: window.scrollX,
+    top: window.scrollY,
+    width: window.innerWidth,
+    height: window.innerHeight,
+  }
+}
+
+function handler(event, effect, wait) {
+  const handleScroll = debounce(() => {
+    effect(getBoundingRect())
+  }, wait)
+
+  window.addEventListener(event, handleScroll)
+
+  return () => window.removeEventListener(event, handleScroll)
+}
+
+function useScroll(effect, wait = 250) {
+  useLayoutEffect(() => handler('scroll', effect, wait))
+}
+
+function useResize(effect, wait = 100) {
+  useLayoutEffect(() => handler('resize', effect, wait))
+}
+
+export { getBoundingRect, useScroll, useResize }