Package Exports

react-step-progress-bar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-step-progress-bar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Step Progress Bar 🌡

A library to easily create progress bar with steps in React ⚛️

React Step Progress Bar

🌐 Live demo : https://react-step-progress-bar.herokuapp.com/

Key Features

Create a <ProgressBar/> with <Step/>s
Customize <Step/> text and colors
Create and use your own <Step/> component

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

Example

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

class StepProgressBar extends React.Component {
  render() {
    return (
      <ProgressBar percent={75} steps={8}>
        {({ ...props }, index) => <Step {...props} text={index + 1} />}
      </ProgressBar>
    );
  }
}

API

`<ProgressBar/>`

name	type	default	description
percent	number		Percantage of progression
children	function		The function used to render the Step components
steps	number	6	The number of Step render in the ProgressBar
unfillColor	string	rgba($color: lightgrey, $alpha: 0.6)	The color of the ProgressBar when it is empty
fillColor	string	rgba($color: #0074d9, $alpha: 0.8)	The color of the ProgressBar when it is full

`<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
big	boolean	false	Set the size of the Step
text	string		The text hold in the Step
unaccomplishedColor	string	lightgrey	Color of the Step when not accomplished yet
accomplishedColor	string	#0074d9	Color of the Step when it is accomplished

License

MIT

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