@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
![Untitled_ Jul 19, 2021 1_46 PM](https://user-images.githubusercontent.com/50941453/126104429-05d1bb2c-eb4c-4437-88d3-7e34851653b3.gif)
License
MIT © yiyb0603