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

react-step-progress-bar

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-step-progress-bar

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

  • 1.0.3
  • latest
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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

nametypedefaultdescription
percentnumberPercantage of progression
childrenStep component(s)ProgressBar only accepts Step as children
stepPositionsarray of numbersBy default Steps are spaced linearly on the ProgressBar. You can override this by specifying the positions of the steps (in percent)
unfilledBackgroundstringrgba($color: lightgrey, $alpha: 0.6);This props is used directly on the CSS background property of the unfilled part of the ProgressBar.
filledBackgroundstringrgba($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)number100%The width of the progress bar in pixel
height (in pixel)number10The height of the progress bar in pixel
hasStepZerobooleantrueTells if steps position should start at 0 or not
textstringAdd a text in the middle of the progress bar

<Step/>

nametypedefaultdescription
accomplishedbooleanTells if this Step has been accomplished
positionnumberThe position in percentage of the Step on the ProgressBar
indexnumberThe index of the Step in the ProgressBar
childrenfunctionThe function used to render the content of the Step
transitionstringUse one of the built-ins transitions
transitionDuration (in ms)string300The duration of the transition
License

MIT


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

Keywords

FAQs

Package last updated on 10 Sep 2018

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc