Skip to content

pierreericgarcia/react-step-progress-bar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

62 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

React Step Progress Bar 🌑

A library to create stunning progress bars and steps in React.


React Step Progress Bar

npm version

πŸ“š READ THE DOCS πŸ“š

🌐 LIVE EXAMPLES 🌐

Key Features

  • Create simple progress bars or with steps 🌑
  • Customize your steps as you want 🎨
  • Create your own step animations πŸŽ₯

Installation

To use this library, you'll need the npm CLI installed on your computer. From your command line, using npm:

npm install react-step-progress-bar

Or using yarn:

yarn add react-step-progress-bar

Examples

For more examples take a look at the official website.

Simple progress bar

This example demonstrate how to create a simple progress bar.

import React from "react";
import "react-step-progress-bar/styles.css";
import { ProgressBar } from "react-step-progress-bar";

class ProgressBar extends React.Component {
  render() {
    return (
      <ProgressBar
        percent={75}
        filledBackground="linear-gradient(to right, #fefb72, #f0bb31)"
      />
    );
  }
}

Progress bar with steps

This example demonstrate how to create your own progress bar with steps.

import React from "react";
import "react-step-progress-bar/styles.css";
import { ProgressBar, Step } from "react-step-progress-bar";

class StepProgressBar extends React.Component {
  render() {
    return (
      <ProgressBar
        percent={75}
        filledBackground="linear-gradient(to right, #fefb72, #f0bb31)"
      >
        <Step transition="scale">
          {({ accomplished }) => (
            <img
              style={{ filter: `grayscale(${accomplished ? 0 : 80}%)` }}
              width="30"
              src="https://vignette.wikia.nocookie.net/pkmnshuffle/images/9/9d/Pichu.png/revision/latest?cb=20170407222851"
            />
          )}
        </Step>
        <Step transition="scale">
          {({ accomplished }) => (
            <img
              style={{ filter: `grayscale(${accomplished ? 0 : 80}%)` }}
              width="30"
              src="https://vignette.wikia.nocookie.net/pkmnshuffle/images/9/97/Pikachu_%28Smiling%29.png/revision/latest?cb=20170410234508"
            />
          )}
        </Step>
        <Step transition="scale">
          {({ accomplished }) => (
            <img
              style={{ filter: `grayscale(${accomplished ? 0 : 80}%)` }}
              width="30"
              src="https://orig00.deviantart.net/493a/f/2017/095/5/4/raichu_icon_by_pokemonshuffle_icons-db4ryym.png"
            />
          )}
        </Step>
      </ProgressBar>
    );
  }
}

Guides

If you want an in-depth view of how to create your own custom steps and custom step transitions, the official website have some dedicated guides.

API

<ProgressBar/>

name type default description
percent number Percantage of progression
children Step component(s) ProgressBar only accepts Step as children
stepPositions array of numbers By default Steps are spaced linearly on the ProgressBar. You can override this by specifying the positions of the steps (in percent)
unfilledBackground string rgba($color: lightgrey, $alpha: 0.6); This props is used directly on the CSS background property of the unfilled part of the ProgressBar.
filledBackground string rgba($color: #0074d9, $alpha: 0.8) This props is used directly on the CSS background property of the filled part of the ProgressBar
width (in pixel) number 100% The width of the progress bar in pixel
height (in pixel) number 10 The height of the progress bar in pixel
hasStepZero boolean true Tells if steps position should start at 0 or not
text string Add a text in the middle of the progress bar

<Step/>

name type default description
accomplished boolean Tells if this Step has been accomplished
position number The position in percentage of the Step on the ProgressBar
index number The index of the Step in the ProgressBar
children function The function used to render the content of the Step
transition string Use one of the built-ins transitions
transitionDuration (in ms) string 300 The duration of the transition

License

MIT


GitHub @pierreericgarcia Β Β·Β  Twitter @pierrericgarcia Β Β·Β  LinkedIn @pierre-eric-garcia Β Β·Β  Medium @pierrericgarcia