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

Progress Bar for show position of scroll page

---
title: "Usage with ref for target react element"
date: "2019-08-12"
slug: 'scroll-progress-read-with-ref'
---

Use the component with the props "refTarget" for target element.

example:
```jsx
<ScrollProgressRead refTarget={refContainer} />
```
<br />

<ContainerRef />


### Code used for this page

```jsx
import React, { forwardRef, useState, useRef } from "react"
import ScrollProgressRead from "react-scroll-progress-read"
import { getParagraph } from "../../helpers/lorem"

// forward ref to p element
const Main = forwardRef(({ txt }, ref) => (
  <p dangerouslySetInnerHTML={{ __html: txt }} ref={ref} />
))

const Container = () => {
  const mainTxt = useRef()
  const [txt, setText] = useState(getParagraph(700))
  const addText = () => setText(`${getParagraph(200)}<br /><br />${txt}`)

  return (
    <>
      <div
        style={{ margin: 0, padding: 0, position: "fixed", left: 0, top: 0 }}
      >
        <ScrollProgressRead refTarget={mainTxt} />
      </div>
      <button type="button" onClick={addText}>
        Add text to paragraph
      </button>
      <div style={{ marginTop: "20px" }}>
        <Main txt={txt} ref={mainTxt} />
      </div>
    </>
  )
}

export default Container
```