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:
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