Scroll Position Indicator Bar In React – Scroll Progress Line


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:

Scroll Position Indicator Bar In React - Scroll Progress Line

Download Details:

Author: yiyb0603

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/yiyb0603/react-scroll-progress-line

License: MIT



Source link

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top