---
title: "React Component for show progress bar connected with the scroll."
date: "2019-08-10"
slug: '/'
---

### NPM Package

npm package : [https://www.npmjs.com/package/react-scroll-progress-read](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

```jsx
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"


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

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

<div style={{margin: 0, padding: 0, position: 'fixed', left: 0, top: 0}}>
    <ScrollProgressRead />
</div>