https://github.com/pierreericgarcia/react-step-progress-bar

A library to create stunning progress bars with steps in React 🌡
https://github.com/pierreericgarcia/react-step-progress-bar

component react react-components react-libraries react-library react-step-progress-bar react-steps reactjs ui ui-components

Last synced: about 2 months ago
JSON representation

A library to create stunning progress bars with steps in React 🌡

• Host: GitHub
• URL: https://github.com/pierreericgarcia/react-step-progress-bar
• Owner: pierreericgarcia
• License: mit
• Created: 2018-08-21T17:01:19.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-09-12T09:19:36.000Z (over 2 years ago)
• Last Synced: 2024-10-13T15:43:06.617Z (3 months ago)
• Topics: component, react, react-components, react-libraries, react-library, react-step-progress-bar, react-steps, reactjs, ui, ui-components
• Language: JavaScript
• Homepage: https://pierreericgarcia.github.io/react-step-progress-bar/
• Size: 2.69 MB
• Stars: 198
• Watchers: 4
• Forks: 27
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        


  React Step Progress Bar 🌡



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







    





  

    

  

  

    

  

   

    

  

  

    

  





  📚 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](http://npmjs.com) CLI installed on your computer. From your command line, using npm:

```bash

npm install react-step-progress-bar

```

Or using yarn:

```bash

yarn add react-step-progress-bar

```

## Examples

For more examples take a look at the [official website](https://pierreericgarcia.github.io/react-step-progress-bar).

### Simple progress bar

This example demonstrate how to create a simple progress bar.

```jsx

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 (

      

    );

  }

}

```

### Progress bar with steps

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

```jsx

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 (

      

        

          {({ accomplished }) => (

            

          )}

        

        

          {({ accomplished }) => (

            

          )}

        

        

          {({ accomplished }) => (

            

          )}

        

      

    );

  }

}

```

## Guides

If you want an in-depth view of how to create your own custom steps and custom step transitions, the [official website](https://pierreericgarcia.github.io/react-step-progress-bar/) have some dedicated guides.

- [Create your custom step](https://pierreericgarcia.github.io/react-step-progress-bar/docs/custom-step-guide)

- [Create your own step transition](https://pierreericgarcia.github.io/react-step-progress-bar/docs/step-transition-guide)

## API

### ``

  

    

      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

    

  

### ``

  

    

      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](https://github.com/pierreericgarcia)  · 

> Twitter [@pierrericgarcia](https://twitter.com/pierrericgarcia)  · 

> LinkedIn [@pierre-eric-garcia](https://www.linkedin.com/in/pierre-eric-garcia)  · 

> Medium [@pierrericgarcia](https://medium.com/@pierrericgarcia)