Skip to content

houzisbw/react-scroll-progress

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Scroll Progress Bar with bookmarks

img 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

About

一个基于React开发的顶部滚动条组件,带有书签功能

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published