React Component for show progress bar connected with the scroll.

When you scroll on the page, the bar indicate the progression on the page or on the paragraph.

3 examples for using the component

NPM Package

npm package : https://www.npmjs.com/package/react-scroll-progress-read

Minimal React version required

Version 16.8 for use React Hook

For include in your project

import ScrollProgressRead from 'react-scroll-progress-read';

...
render() {
  <div>
  <ScrollProgressRead />
  ....other components
  </div>
}

Props config

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) optional : color of the container
barColor (string) optional : color of the bar
height (string) optional : height of the component.
target (string) (optional if refTarget defined): ID of html element
refTarget (React.RefObject) (optional if target defined) : reference to react element

if not ref target, the component use target ID and if target is undefined, the component use the document.

Default values :

backgroundColor: "#CCC"
barColor: "#e91e63"
height: "5px"

import ScrollProgressRead from 'react-scroll-progress-read';

...
render() {
  <div>
  <ScrollProgressRead
    backgroundColor="#CCC"
    barColor="#FFCC00"
    height="5px"
    target="read-container"
    refTarget={refContainer}
  />
  ....
  </div>
}