Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add a progress bar with Reactstrap.

Progress

We can add a progress bar with the Progress component.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Progress } from "reactstrap";

export default function App() {
  return (
    <div className="text-center">
      <Progress value={2 * 20} />
      <Progress color="success" value="25" />
      <Progress color="info" value={50} />
      <Progress color="warning" value={75} />
      <Progress color="danger" value="100" />
    </div>
  );
}

to display various progress bars.

The value prop lets us change the amount of the bar that’s filled.

color has the color and they’re the variants that are shown.

Multiple Segments

We can create a progress bar that has multiple segments.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Progress } from "reactstrap";

export default function App() {
  return (
    <div className="text-center">
      <Progress multi>
        <Progress bar value="15">
          foo
        </Progress>
        <Progress bar color="success" value="30">
          bar
        </Progress>
        <Progress bar color="info" value="25">
          baz
        </Progress>
        <Progress bar color="warning" value="20">
          qux
        </Progress>
        <Progress bar color="danger" value="5">
          !!
        </Progress>
      </Progress>
    </div>
  );
}

We have a Progress components that wraps around other Progress components.

The multi prop lets us add a progress bar with multiple segments.

The inner bars has the bar component with the color to specify their color.

The value is the value out of 100.

#programming #technology #javascript #software-development #web-development