Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProReport whether the page or an element is scrolling up or down, ignoring small movements, plus whether it is at the top.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for a header that hides on scroll down and returns on scroll up, a floating action button that shrinks, or a toolbar that follows reading intent.
Do not use it for the absolute offset (use useScrollPosition).
import { useScrollDirection } from "@/hooks/use-scroll-direction"const { direction, atTop } = useScrollDirection({ threshold: 12 })
<header data-hidden={direction === "down" && !atTop}>...</header>useScrollDirection(options?): { direction: "up" | "down" | null; atTop: boolean }
| Option | Type | Default | Description |
|---|---|---|---|
threshold | number | 10 | Pixels the scroll must move before the direction flips. |
target | RefObject<HTMLElement | null> | HTMLElement | window | The scrolling element. |
direction is null until the first move that passes the threshold. Overscroll bounce at the top and bottom of a page does not flip it.
A hook has no markup. A header that hides on scroll must stay reachable: show it again on keyboard focus (:focus-within) and when the person scrolls up, and never hide the only way to navigate.
The hook ships with renderHook tests (use-scroll-direction.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.