Scroll Position Indicator Bar In React – Scroll Progress Line

Description:

A linear scroll progress bar component that indicates the current scroll position of the page.

How to use it:

1. Install and import the component.

# Yarn
$ yarn add @yiyb0603/react-scroll-progress-line

# NPM
$ npm i @yiyb0603/react-scroll-progress-line --save

import React from ‘react’;
import ScrollProgressLine from ‘@yiyb0603/react-scroll-progress-line’

2. Generate a basic scroll progress bar on the top of the app.

const App = (): JSX.Element => {
  return (
    <ScrollProgressLine
      backgroundColor='#222'
      progressColor='#ff0000'
    />
  );
}
export default App;

3. Set the height of the bar. Default: 5px.

<ScrollProgressLine
  backgroundColor='#222'
  progressColor='#ff0000'
  height='8px'
/>

4. Apply additional CSS styles to the bar.

<ScrollProgressLine
  backgroundColor='#222'
  progressColor='#ff0000'
  customStyle={CSS PROPERTIES HERE}
/>

5. Determine whether to use the click-to-go event or not. Default: false.

<ScrollProgressLine
  backgroundColor='#222'
  progressColor='#ff0000'
  disableClick='true'
/>

6. Run a function after click move.

<ScrollProgressLine
  backgroundColor='#222'
  progressColor='#ff0000'
  clickCallback={() => {}}
/>

Preview: