---
title: "Usage with the document size"
date: "2019-08-10"
slug: 'scroll-progress-read-with-document'
---

Use the component with the no props for target. The component take the document height.

example:
```jsx
<ScrollProgressRead />
```
<br />

<Container />


### Code used for this page

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

const initialState = {
  backgroundColor: "#CCC",
  barColor: "red",
  height: "10px",
}

const reducer = (state, action) => {
  switch (action.type) {
    case "update":
      return { ...state, ...action.payload }
    default:
      return state
  }
}

const Container = () => {
  const [state, dispatch] = React.useReducer(reducer, initialState)
  const update = e => {
    const { name, value } = e.currentTarget
    const payload = { [name]: value }
    dispatch({ type: "update", payload })
  }
  return (
    <>
      <div
        style={{ margin: 0, padding: 0, position: "fixed", left: 0, top: 0 }}
      >
        <ScrollProgressRead {...state} />
      </div>
      <h3>Change props with select</h3>
      <div>
        <select onChange={update} name="barColor">
          <option value="red">red</option>
          <option value="blue">blue</option>
          <option value="orange">orange</option>
        </select>
        <select onChange={update} name="backgroundColor">
          <option value="grey">grey</option>
          <option value="gold">gold</option>
          <option value="#AAA">#AAA</option>
        </select>
        <select onChange={update} name="height">
          <option value="1px">1px</option>
          <option value="5px">5px</option>
          <option value="10px">10px</option>
          <option value="15px">15px</option>
          <option value="20px">20px</option>
        </select>
        <br />
        <br />
      </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 voluptate summum bonum ponat, consentaneum sit dicere.......
      </p>
    </>
  )
}

export default Container


```