@emmgfx/scroll-hint

Scroll edge indicators for React. Shows shadows and/or solid lines on the edges of a scrollable container to hint that there's more content — no scroll events, no polling, just IntersectionObserver.

Installation

npm install @emmgfx/scroll-hint

Usage

import { ScrollHint } from "@emmgfx/scroll-hint";

<ScrollHint>
  {/* your scrollable content */}
</ScrollHint>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | direction | "vertical" \| "horizontal" \| "both" | "vertical" | Which axes to observe and show indicators on | | shadowColor | string | "rgba(0, 0, 0, 0.15)" | CSS color for the gradient shadow. Set to "" to disable | | shadowSize | number | 20 | Height/width of the shadow overlays in pixels | | lineColor | string | undefined | CSS color for a solid line at the edge. Omit to disable | | lineSize | number | 1 | Thickness of the solid line in pixels |

All standard div props are forwarded to the outer wrapper element.

Examples

Horizontal scroll:

<ScrollHint direction="horizontal">
  <div style={{ display: "flex" }}>
    {/* columns */}
  </div>
</ScrollHint>

Both directions:

<ScrollHint direction="both" style={{ height: 300 }}>
  {/* 2D scrollable content */}
</ScrollHint>

Solid line instead of shadow:

<ScrollHint shadowColor="" lineColor="rgba(0,0,0,0.1)">
  {/* content */}
</ScrollHint>

Line + shadow combined:

<ScrollHint lineColor="rgba(0,0,0,0.1)">
  {/* content */}
</ScrollHint>

Dark mode

shadowColor and lineColor accept any CSS value, including variables. Define a variable in your stylesheet and update it per color scheme:

:root { --hint-shadow: rgba(0, 0, 0, 0.15); }
@media (prefers-color-scheme: dark) {
  :root { --hint-shadow: rgba(255, 255, 255, 0.1); }
}

<ScrollHint shadowColor="var(--hint-shadow)">
  {/* content */}
</ScrollHint>

Works with any dark mode strategy — media query, class-based (class="dark"), or data attributes.

Tailwind CSS

Define the variable inline using Tailwind's dark mode variant:

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

License

MIT © Josep Viciana