useScrollPosition

Hook

Tracks the current scroll position of the window.

npx arupui add use-scroll-position

Usage

use-scroll-position.tsx
import { useScrollPosition } from "@/hooks/use-scroll-position"

function Header() {
  const { y } = useScrollPosition()
  const isScrolled = y > 50

  return (
    <header className={isScrolled ? "shadow-md" : ""}>
      Navigation
    </header>
  )
}

Returns

{ x: number, y: number }
Theme Editor

Theme

Radius0.5rem
Letter Spacing0em

Colors

light