Progress Bar for show position of scroll page
npm install react-scroll-progress-readWhen you scroll on the page, the bar indicate the progression on the page.
Doc : https://react-scroll-progress-read.faramazpat.now.sh/
npm package : https://www.npmjs.com/package/react-scroll-progress-read
Version 16.8 for use React Hook
``jsx
import ScrollProgressRead from 'react-scroll-progress-read';
...
render() {
$3
By default, the bar take the window height. If you want target an html element, you must indicate the ID of the element in props with "target"
You can change parameter with the props :
- backgroundColor (string) : color of the container
- barColor (string) : color of the bar
- height (string) : height of the component.
- target (string) : ID of html element
- refTarget (React.RefObject) : reference to react element
The props aren't required.
if not ref target, the component use target ID and if target is undefined, the component use the document.
jsx
import ScrollProgressRead from 'react-scroll-progress-read';...
render() {
barColor="#FFCC00"
height="5px"
target="read-container"
refTarget={refContainer}
/>
....
}
``