Skip to content
React Component for show progress bar connected with the scroll.
TypeScript JavaScript
Branch: develop
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
dist
doc
src
. prettierignore
.gitignore
.lintstagedrc
.npmignore
.prettierrc
LICENSE
README.md
index.js
now.json
package.json
rollup.config.js
setup-jest.ts
tsconfig.json
tslint.json
yarn.lock

README.md

React Component for show progress bar connected with the scroll.

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

Doc : https://react-scroll-progress-read.faramazpat.now.sh/

npm package : https://www.npmjs.com/package/react-scroll-progress-read

React version required

Version 16.8 for use React Hook

Installation

npm i react-scroll-progress-read

or

yarn add react-scroll-progress-read

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
  • refTarget (React.RefObject) : reference to react element

The props aren't required.

if not ref target, the component use target ID and if target is undefined, the component use the document.

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

...
render() {
  <div>
  <ScrollProgressRead
    backgroundColor="#CCC"
    barColor="#FFCC00"
    height="5px"
    target="read-container"
    refTarget={refContainer}
  />
  ....
  </div>
}
You can’t perform that action at this time.