3.0.5 • Published 2 years ago

react-page-scroll-progress-bar v3.0.5

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

React Page Scroll Progress Bar

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

Installation

npm users

  npm install react-page-scroll-progress-bar

yarn users

  yarn add react-page-scroll-progress-bar

Usage

Import the component

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

Optional props:

ParameterDefaultDescription
containerdocument.bodyThe reference of the parent most element of your react app.
color#eb5757Color of the progress bar as a hex string
bgColor#f2f2f2Color of the progress bar background as a hex string
height0.25rem or 4pxHeight of the progress bar
top0Top position

Example with document body as the container -

const App = () => {
  return (
    <PageScrollProgressBar color="#00FFFF" bgColor="transparent" height="6px" />
    <div className="App">
      APP
    </div>
  )
}

Example with app container element -

const App = () => {

  const AppRef = useRef(null);

  return (
    <PageScrollProgressBar container={AppRef.current} color="#00FFFF" bgColor="#f2f2f2" height="6px" />
    <div className="App" ref={AppRef}>
      APP
    </div>
  )

}

Checkout the Example app

Checkout the Source code

🔗 Links

portfolio linkedin

3.0.2

2 years ago

3.0.5

2 years ago

3.0.1

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.0.18

3 years ago

1.0.17

3 years ago

1.0.16

3 years ago

1.0.15

3 years ago

1.0.14

3 years ago

1.0.13

3 years ago

1.0.12

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago