React Page Scroll Progress Bar

Scroll bar to show the scroll progress of the page at the top of the page.

Installation

npm users

1  npm install react-page-scroll-progress-bar

yarn users

1  yarn add react-page-scroll-progress-bar

Usage

Import the component

1import PageScrollProgressBar from "react-page-scroll-progress-bar";

Optional props:

Parameter	Default	Description
container	document.body	The reference of the parent most element of your react app.
color	#eb5757	Color of the progress bar as a hex string
bgColor	#f2f2f2	Color of the progress bar background as a hex string
height	0.25rem or 4px	Height of the progress bar
top	0	Top position

Example with document body as the container -

1const App = () => {
2  return (
3    <PageScrollProgressBar color="#00FFFF" bgColor="transparent" height="6px" />
4    <div className="App">
5      APP
6    </div>
7  )
8}

Example with app container element -

1const App = () => {
2
3  const AppRef = useRef(null);
4
5  return (
6    <PageScrollProgressBar container={AppRef.current} color="#00FFFF" bgColor="#f2f2f2" height="6px" />
7    <div className="App" ref={AppRef}>
8      APP
9    </div>
10  )
11
12}

Checkout the Example app

Checkout the Source code

🔗 Links