Skip to content

README.md

Latest commit

 

History

History
67 lines (45 loc) · 1.69 KB

README.md

File metadata and controls

67 lines (45 loc) · 1.69 KB

react-scroll-progress-tracker

npm

A small NPM React component that shows page scroll progress in a compact doughnut tracker.

The tracker stays in the bottom-right corner and updates automatically as the user scrolls.

Demo

progress-tracker.1.mp4

Install

npm install react-scroll-progress-tracker

The package expects the consuming app to provide matching react and react-dom versions. If your app already uses React 19, keep both packages on the same patch version.

Use

import { ScrollIndicator } from "react-scroll-progress-tracker";

export default function App() {
  return <ScrollIndicator />;
}

Props example

import { ScrollIndicator } from "react-scroll-progress-tracker";

export default function App() {
  return (
    <ScrollIndicator
      size={80}
      color="#0ea5e9"
      trackColor="rgba(148, 163, 184, 0.35)"
    />
  );
}

Props

  • size: number in pixels, default 96
  • color: any valid CSS color string, default #00ff00
  • trackColor: any valid CSS color string for the inactive ring path

Props explanation

  • size controls how much space the tracker takes on the page.
  • color controls the visible progress arc.
  • trackColor controls the inactive ring, which helps the progress stand out clearly.

Notes

  • The component is fixed to the bottom-right corner.
  • It tracks scroll position automatically.
  • React is required as a peer dependency.

Note

Make sure react and react-dom are installed at the same version in the consuming app.