React Scroll Progress Bar with bookmarks

A simple progress component record your scroll position, you can click the progress bar to reach a specific document position, addtionally,double-click the element on page then you got a bookmark hang on the progress bar.

Click the bookmark then you can reach the position of the element on page, click the 'X' button on right of scroll bar you can delete all bookmarks.

The bookmark function is useful when you read a large long article, with bookmarks you can go back easily.

Installation

NPM

npm install --save react-scroll-progress-with-bookmark

Yarn

yarn add react-scroll-progress-with-bookmark

Usage

import ProgressBar from 'react-scroll-progress-with-bookmark'
<ProgressBar position="top" barColor="#df2233"/>

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | position | string | 'top' | ProgressBar position on window('top','bottom') | | barColor | string | '#337fff' | Progress bar color | | hideAfterScroll | bool | false | if true the progress bar will hide after scroll | | timeAfterScrollToHide | number | 1000 | Interval time(ms) for hideAfterScroll |