yiyb0603/react-scroll-progress-line

🎁 This package is a bar with the ability to show at the top how far down the current scroll point is.

@yiyb0603/react-scroll-progress-line

🎁 This package is a bar with the ability to show at the top how far down the current scroll point is.

Install

npm install --save @yiyb0603/react-scroll-progress-line

or

yarn add @yiyb0603/react-scroll-progress-line

Props

Name	Description	Type	Required	Default
backgroundColor	Color indicating where the current scroll has not reached	string	O	""
progressColor	A color indicating where the current scroll has reached	string	O	""
height	ProgressLine's height	string | number	X	5px
customStyle	Set other custom styles	CSSProperties	X	{}
disableClick	Whether to use the click-to-go event or not.	boolean	X	false
clickCallback	Function to run after click move	Function	X	() => {}

Usage

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

const App = (): JSX.Element => {
  return (
    <ScrollProgressLine
      backgroundColor='gray'
      progressColor='blue'
      height='8px'
    />
  );
}

export default App;

Execution

License

MIT © yiyb0603