npm install @emmgfx/scroll-hint

scroll-hint

Scroll edge indicators for React — no listeners, no scroll events, just IntersectionObserver.

GitHubnpm

Zero scroll events

Uses IntersectionObserver on sentinel elements. No listeners, no polling, no jank.

All directions

Vertical, horizontal, or both — one prop controls all four edges.

Shadow or line

Gradient shadow, solid line, or both — mix and match per your design.

Fully customizable

Control colors and sizes. Accepts all standard div props.

Usage

1import { ScrollHint } from "@emmgfx/scroll-hint";
2
3<ScrollHint>
4  {/* ScrollHint renders as a div. Give it a size via style, className,
5      or let a flex/grid parent control it — just like any block element. */}
6  {/* your content */}
7</ScrollHint>

Dark mode

Both shadowColor and lineColor accept any CSS value — including variables. Define a variable per color scheme and pass it as the prop.

1<style>
2  :root { --hint-shadow: rgba(0, 0, 0, 0.15); }
3  @media (prefers-color-scheme: dark) {
4    :root { --hint-shadow: rgba(255, 255, 255, 0.1); }
5  }
6</style>
7
8<ScrollHint shadowColor="var(--hint-shadow)">
9  {/* lineColor works the same way */}
10  {/* content */}
11</ScrollHint>

Tailwind CSS

Use Tailwind's dark: variant to define the variable inline — no extra stylesheet needed.

1<ScrollHint
2  shadowColor="var(--hint-shadow)"
3  className="[--hint-shadow:var(--color-slate-200)] dark:[--hint-shadow:var(--color-slate-800)]"
4>
5  {/* content */}
6</ScrollHint>

Live demos

Scroll inside each container to see the shadows appear and disappear.

direction="vertical"default

Shadows appear on top and bottom edges as you scroll vertically.

1<ScrollHint style={{ height: 200 }}>
2  {/* list items */}
3</ScrollHint>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30

Props

All standard div props are forwarded to the outer wrapper.

PropTypeDefaultDescription
direction"vertical" | "horizontal" | "both""vertical"Which axes to observe and show shadows on.
shadowColorstring"rgba(0,0,0,0.15)"CSS color for the gradient shadow. Set to "" to disable.
shadowSizenumber20Height/width of the shadow overlays in pixels.
lineColorstringundefinedCSS color for a solid line at the edge. Omit to disable.
lineSizenumber1Thickness of the solid line in pixels.