use Scroll

Component 5

About

A simple React hook that returns true when the page is scrolled past a specified pixel threshold.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds use Scroll to your project and fits it to your theme.

Code

How use Scroll is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import { useScroll } from "@/components/ui/use-scroll";

export default function DemoOne() {
	const [threshold, setThreshold] = React.useState(10);
	const scrolled = useScroll(threshold);

	return (
		<div className="min-h-[125vh] place-content-center px-4 py-12">
			<header className="bg-background fixed top-0 right-0 left-0 flex h-12 items-center justify-center border-b">
				<p className="text-sm">
					Scrolled: <span className="font-medium">{scrolled ? 'true' : 'false'}</span>
				</p>
			</header>

			<main className="mx-auto max-w-md space-y-4">
				<h1 className="text-lg font-semibold">useScroll Hook</h1>
				<label className="flex items-center gap-2 text-sm">
					<span>Threshold:</span>
					<input
						type="number"
						value={threshold}
						onChange={(e) => setThreshold(Number(e.target.value))}
						className="w-20 rounded border px-2 py-1 text-sm"
					/>
				</label>

				<p className="text-sm">
					Scroll down the page — the value above controls how many pixels must be scrolled before{' '}
					<code>scrolled</code> becomes <code>true</code>.
				</p>
			</main>
		</div>
	);}