React scrolling progress

This is a simple React component that allows you to show a scrolling progress bar in your React app.

Installation

With Yarn:

yarn add react-scrolling-progress

With NPM:

npm i react-scrolling-progress

Usage

Default

This is the simpliest way to use the component.

import React from 'react';
import ScrollProgress from 'react-scrolling-progress';

const MyComponent = () => {
    return (
        <div>
            <ScrollProgress />
        </div>
    )
}

Customize

This will create a green bar, with height of 45px at the bottom of your website.

import React from 'react';
import ScrollProgress from 'react-scrolling-progress';

const MyComponent = () => {
    return (
        <div>
            <ScrollProgress
                position="bottom"
                backgroundColor="#1EE94D"
                barSize={45}
                />
        </div>
    )
}

Props

|Prop name|Type|Default value| |---|---|---| | styles | Object | Default component styles | | position | String, one of: 'top','bottom', 'left', 'right| 'top'| |className |string |'progress-bar' | |barSize|number or string |20 |