react-scroll-progress-read/doc/src/content/with-id.mdx

Progress Bar for show position of scroll page

---
title: "Usage with id for target html element"
date: "2019-08-11"
slug: 'scroll-progress-read-with-id'
---

Use the component with the props "target" for target element by ID.

example:
```jsx
<ScrollProgressRead target="IDContainer" />
```
<br />

<ContainerID />


### Code used for this page

```jsx
import React from "react"
import ScrollProgressRead from "react-scroll-progress-read"

const ContainerID = () => (
  <>
    <div style={{ margin: 0, padding: 0, position: "fixed", left: 0, top: 0 }}>
      <ScrollProgressRead target="read-container" />
    </div>
    <p id="read-container">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod non faceret,
      si in voluptate summum bonum poneret. Illud quaero, quid ei, qui in.....
    </p>
  </>
)

export default ContainerID

```