/react-step-progress-bar

Primary LanguageJavaScriptMIT LicenseMIT

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 --save 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