# react-progress-bar-with-section

> A customizable progress bar component for React.

Latest version **1.0.3** (published 2023-10-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-progress-bar-with-section
pnpm add react-progress-bar-with-section
yarn add react-progress-bar-with-section
bun add react-progress-bar-with-section
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2023-10-09 |
| First published | 2023-10-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sivamani-18 |
| Maintainers | sivamani18 |
| Keywords | progress bar, component, progress-bar-with-section |

## Links

- npm: https://www.npmjs.com/package/react-progress-bar-with-section
- npm.io page: https://npm.io/package/react-progress-bar-with-section

## Recent versions

- 1.0.3 (latest) — 2023-10-09
- 1.0.2 — 2023-10-09
- 1.0.1 — 2023-10-09
- 1.0.0 — 2023-10-09

## README

# React Progress Bar Component

A customizable progress bar component for React.


## [Demo](https://codesandbox.io/s/react-progress-bar-with-section-d56nf8)

## Installation

You can install this package using npm or yarn:

```bash
npm install react-progress-bar-with-section
# or
yarn add react-progress-bar-with-section
```

## Usage


```sh
import React, { useState } from "react";
import { ProgressBar } from "react-progress-bar-with-section";

import "./styles.css";

const App = () => {
  const [currentSection, setCurrentSection] = useState<number>(1);

  const handleCurrentSectionChange = (section: number) => {
    setCurrentSection(section);
  };

  const onSubmit = () => {
    console.log("Click finish button");
  };

  return (
    <div className="App">
      <h1>React Progress Bar With Section</h1>
      <ProgressBar
        currentSection={currentSection}
        totalSections={5}
        finalAction={() => onSubmit()}
        onCurrentSectionChange={handleCurrentSectionChange}
      >
        {currentSection === 1 && (
          <section>
            <h1>Section 1</h1>
          </section>
        )}
        {currentSection === 2 && (
          <section>
            <h1>Section 2</h1>
          </section>
        )}
        {currentSection === 3 && (
          <section>
            <h1>Section 3</h1>
          </section>
        )}
        {currentSection === 4 && (
          <section>
            <h1>Section 4</h1>
          </section>
        )}
        {currentSection === 5 && (
          <section>
            <h1>Section 5</h1>
          </section>
        )}
      </ProgressBar>
    </div>
  );
};
export default App;

```

## CSS

```sh
.common-progress {
  width: 100%;
  max-width: 600px;
  height: 22px;
  margin: auto;
  background-color: #e9e9e9;
}

.common-progress-bar {
  content: "";
  display: block;
  height: 100%;
  background-color: #045eb3;
  width: 0;
  transition: width 0.5s ease-in-out;
}
```

## Props

The `Calendar` component accepts the following props:

```jsx

| Prop                  | Type           | Default  | Description                                                                                              |
| --------------------- | ---------------| -------- | -------------------------------------------------------------------------------------------------------- |
| `currentSection`      | number         | `1`      | The current section of the progress bar.                                                                |
| `totalSections`       | number         | `3`      | The total number of sections in the progress bar.                                                        |
| `finalAction`         | function       |          | A callback function to be called when the final action button is clicked (e.g., Finish button).        |
| `onCurrentSectionChange` | function    |          | A callback function called when the current section changes.                                              |
| `nextBtnDisabled`     | boolean        | `false`  | If `true`, disables the Next button.                                                                     |
| `backBtnDisabled`     | boolean        | `false`  | If `true`, disables the Back button.                                                                     |
| `addClass`            | string         |          | Additional CSS classes to apply to the progress bar container.                                            |
| `backClass`           | string         |          | Additional CSS classes to apply to the Back button.                                                       |
| `nextClass`           | string         |          | Additional CSS classes to apply to the Next button.                                                       |
| `actionClass`         | string         |          | Additional CSS classes to apply to the Final Action (Finish) button.                                       |
| `commonBtnClass`      | string         |          | Additional CSS classes to apply to all buttons (Back, Next, Finish).                                      |
| `backName`            | string         | `'Back'` | The text label for the Back button.                                                                      |
| `nextName`            | string         | `'Next'` | The text label for the Next button.                                                                      |
| `actionName`          | string         | `'Finish'` | The text label for the Final Action (Finish) button.                                                      |
| `children`            | React.ReactNode|          | Content to be displayed inside the progress bar component.                                                 |
| `hideProgressBar`     | boolean        | `true`   | If `false`, hide the ProgressBar block.                                                                      |

```

---
_Source: https://npm.io/package/react-progress-bar-with-section · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._