1.0.1 • Published 6 years ago
react-scroll-progress-with-bookmark v1.0.1
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-bookmarkYarn
yarn add react-scroll-progress-with-bookmarkUsage
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 |