read-progressbar
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

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

Package Sidebar

Install

npm i read-progressbar

Weekly Downloads

12

Version

1.0.0

License

MIT

Unpacked Size

11.8 kB

Total Files

8

Last publish

Collaborators

  • flaugzig