react-scrolling-progress

1.0.3 • Public • Published

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

Package Sidebar

Install

npm i react-scrolling-progress

Weekly Downloads

1

Version

1.0.3

License

MIT

Unpacked Size

486 kB

Total Files

8

Last publish

Collaborators

  • maciekgrzybek