useScrollEdges React hook in TypeScript

Add to a project

Requirements: React 19, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import useScrollEdges from @/hooks/use-scroll-edges.

import { fadeMaskStyle, useScrollEdges } from "@/hooks/use-scroll-edges"
import { cn } from "@/lib/utils"

export function Notifications({ items }: { items: string[] }) {
  const { ref, edges } = useScrollEdges<HTMLUListElement>()

  return (
    <section className="flex max-h-80 flex-col">
      <h2 className={cn("px-4 py-3 text-[15px] font-semibold", edges.top && "border-b border-foreground/10")}>Notifications</h2>
      <ul ref={ref} style={fadeMaskStyle("y")} className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4">
        {items.map((item) => (
          <li key={item} className="py-3 text-sm">{item}</li>
        ))}
      </ul>
    </section>
  )
}

API

• fadedefault 24
  number

  useScrollEdges(options?): the largest fade in px. The hook writes --fade-top, --fade-bottom, --fade-left and --fade-right on the element, each growing with the distance to its edge, so a fade eases out as you reach the end instead of popping.

• thresholddefault 1
  number

  Distance in px from an edge that still counts as being at it (absorbs sub-pixel scroll positions).

• disableddefault false
  boolean

  Stops measuring; the fades stay at their last size.

• returns
  { ref: RefCallback<T>; edges: ScrollEdges; overflow: { x: boolean; y: boolean } }

  ref goes on the scrolling element (a plain overflow div or a Radix ScrollArea viewport). edges says where more content lies ({ top, bottom, left, right }) and overflow whether it scrolls at all; both re-render only when a value flips, never per scroll frame. Handles RTL.

Parts

FAQ

Used in

More React hooks and utilities