Package Exports

react-scrolling-progress

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-scrolling-progress) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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