react-custom-scroll-progress

Usage

Installation

npm i react-custom-scroll-progress

Import styles in App.js

import 'react-custom-scroll-progress/dist/index.css'

This assumes that you are using react project to consume this library.

Storybook Demo

Storybook Demo Link

Stackblitz Demo

Stackblitz Demo Link

Types of progressbars

1. <ProgressBar />

   | Props | Description | PropType | | ---------------------- | --------------------------------------------------------------- | :-----------------------------------------: | | hideNativeScrollbar | to hide native scrollbar | boolean | | yScrollBarPosition | to set scrollbar position for vertical scroll. | 'top' , 'right' , 'bottom' , 'left' | | xScrollBarPosition | to set scrollbar position for horizontal scroll. | 'top' , 'right' , 'bottom' , 'left' | | yScrollBarThumbStyle | style to add custom styles to vertical scollbar thumb | object | | yScrollBarTrackStyle | style to add custom styles to vertical scollbar track | object | | xScrollBarThumbStyle | style to add custom styles to horizontal scollbar thumb | object | | xScrollBarTrackStyle | style to add custom styles to horizontal scollbar track | object | | onScroll | emits the percentage of scroll for both vertical and horizontal | callback |

2. <CircularProgressBar />

   | Props | Description | PropType | | ------------------------------ | ------------------------------------------------------------------------------------------------- | :----------------------: | | hideNativeScrollbar | to hide native scrollbar | boolean | | verticalScrollColor | color string to add custom styles to circular progressbar which shows a vertical scroll percent | string | | horizontalScrollColor | color string to add custom styles to circular progressbar which shows a horizontal scroll percent | string | | verticalScrollTrackStyle | style to add custom styles to vertical scollbar track | object | | horizontalScrollTrackStyle | style to add custom styles to horizontal scollbar track | object | | currentState | to show collapsed or slit varient. | 'split' , 'collapse' | | hideVerticalScrollProgress | to hide vertical scroll progress | boolean | | hideHorizontalScrollProgress | to hide horizontal scroll progress | boolean | | autoSplit | to auto split vertical and horizontal progressbar when user scrolls on page | boolean | | autoHide | to auto hide the progress bar when there is no scroll interaction | boolean | | onScroll | emits the percentage of scroll for both vertical and horizontal | callback |

Note: The parent html element of progressbar component or the progressbar component itself should have some width and height specified to show the progress bar.