1.0.0 • Published 4 years ago
read-progressbar v1.0.0
Read progressbar
When you want to show the user how much they have scrolled by showing a progressbar at the top of the window. The progressbar is commonly used when you have a lot of text content on your site.
Installation
npm i read-progressbar
Demo
Examples
import React, { Component } from 'react';
import { render } from 'react-dom';
import ReadProgressBar from 'read-progressbar';
interface AppProps {}
interface AppState {}
class App extends Component<AppProps, AppState> {
myRef;
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return (
<div>
<ReadProgressBar attachTo={this.myRef} />
<div style={{ height: '2000px' }} ref={this.myRef}></div>
</div>
);
}
}
render(<App />, document.getElementById('root'));
API
Prop | Type | Description |
---|---|---|
attachTo | Ref | The container you want to track |
color | string | the color of the progressbar |
backgroundColor | string | The background color of the progressbar |