react-scroll-progress-read

WIP

React Component for show progress bar connected with the scroll.

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

example: https://react-yj7ccf.stackblitz.io

For include in your project

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

...
render() {
  <div>
  <ScrollProgressRead />
  ....
  </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) : color of the container
• barColor (string) : color of the bar
• height (string) : height of the component.
• target (string) : ID of html element

The props aren't required.

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

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