Next.js - Detecting Scrolling Direction - Up / Down

Scrolling-Direction.tsx

import React from 'react'
import { useScrollDirection } from 'react-use-scroll-direction'

export const Window_Scroll_Direction = () => {
  const [direction, setDirection] = React.useState(String)
  const { isScrollingUp, isScrollingDown } = useScrollDirection()

  React.useEffect(() => {
    isScrollingDown && setDirection('down')
    isScrollingUp && setDirection('up')
  }, [isScrollingDown, isScrollingUp])

  return (
    <>
      <div className="fixed top-0 bg-white">
        {direction === 'down' ? 'Scrolling down' : 'scrolling up'}
      </div>
    </>
  )
}