Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

react-scroll-progress-bar

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-scroll-progress-bar

A scroll progress bar component for React


Version published
Weekly downloads
427
increased by32.2%
Maintainers
1
Weekly downloads
 
Created
Issues
2

react-scroll-progress-bar

React Component for a fixed scroll progress bar. The progress bar can use the default color and height, or can be customized by any user provided height and color.

Install

npm install react-scroll-progress-bar

Usage

Default Progress Bar:

import React from "react";
import ProgressBar from "react-scroll-progress-bar"; //Add this line to import the component

export default class App extends React.Component {
  render() {
    return (
      <div>
        <ProgressBar />
        //This is all you need to get the default view working
      </div>
    );
  }
}

Custom Progress Bar:

import React from "react";
import ProgressBar from "react-scroll-progress-bar";

export default class App extends React.Component {
  render() {
    return (
      <div>
        <ProgressBar height="6" bgcolor="#000" duration="0.2" />
        // Here you can add any react component or jsx // Add ProgressBar at your
        top level component or Root component. // Change height and background-color
        by setting respective props.
      </div>
    );
  }
}

Configuration:

<ProgressBar height="8" bgcolor="#F43059" duration="1" />

height - Set height of progress bar. Default height is 8px. Pass the number not the unit. Unit is px

bgcolor - Set background-color of progress bar. Default background-color is #F43059.

duration - Set timing-duration for transition property. Default is 1s. Pass the number not the unit. Unit is s(seconds)

NOTE: To remove transition animation on progress bar, simply pass duration="0" to ProgressBar component.


FAQs

Package last updated on 17 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts