3.0.5 • Published 10 months ago
react-page-scroll-progress-bar v3.0.5
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:
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 -
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>
)
}
🔗 Links
3.0.2
10 months ago
3.0.5
10 months ago
3.0.1
2 years ago
2.0.2
2 years ago
2.0.1
2 years ago
2.0.0
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago