https://github.com/aloknecessary/react-progress-stepper-ts
React Progress Stepper written in typescript
https://github.com/aloknecessary/react-progress-stepper-ts
react react-progress-bar react-progress-stepper react-stepper react-stepper-ts reactjs typescript
Last synced: about 1 month ago
JSON representation
React Progress Stepper written in typescript
- Host: GitHub
- URL: https://github.com/aloknecessary/react-progress-stepper-ts
- Owner: aloknecessary
- License: mit
- Created: 2024-01-08T14:01:31.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2026-02-20T10:06:49.000Z (about 1 month ago)
- Last Synced: 2026-02-20T14:08:18.821Z (about 1 month ago)
- Topics: react, react-progress-bar, react-progress-stepper, react-stepper, react-stepper-ts, reactjs, typescript
- Language: TypeScript
- Homepage: https://aloknecessary.github.io/react-progress-stepper-ts/
- Size: 3.47 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React Progress Stepper
Minimal and beautiful stepper for React.
## ⚙️ Installation
```shell
$ npm i react-progress-stepper-ts
$ yarn add react-progress-stepper-ts
```
## ✔️ Usage
```js
import React from 'react';
import {
Stepper,
Step,
useStepper,
} from "react-progress-stepper-ts";
export default const App = () => {
const { step, incrementStep, decrementStep } = useStepper(0, 3);
return (
<>
Prev
Next
>
)
}
```
## 🔎 Modules
### 🔹 Stepper
| Property | Type | Description |
| ---------- | ------- | --------------------------------------- |
| `step` | Integer | State to track the current step |
| `vertical` | Boolean | Toggle vertical view |
| `dark` | Boolean | Toggle dark mode |
| `numbered` | Boolean | Toggle if each step is numbered or not |
| `theme` | Object | Customize the appearance of the stepper |
### 🔹 Step
| Property | Type | Description |
| --------------- | -------- | ---------------------------- |
| `customContent` | Function | Override step circle content |
### 🔹 Content
You can customize the content of each step, as the example below:
```js
import React from 'react';
import {
Stepper,
Step,
useStepper,
StepNumber,
StepTitle,
StepStatus,
StepDescription,
} from "react-progress-stepper-ts";
export default const App = () => {
const { step, incrementStep, decrementStep } = useStepper(0, 3);
return (
<>
Title
Description
Title
Description
Title
Description
>
)
}
````
#### StepNumber
| Property | Type | Description |
| -------- | ------ | -------------- |
| `text` | String | Customize text |
#### StepTitle
StepTitle comes with no property, you can pass text as children.
#### StepStatus
| Property | Type | Description |
| --------------- | ------ | -------------- |
| `textProgress` | String | Customize text |
| `textCompleted` | String | Customize text |
| `textPending` | String | Customize text |
#### StepDescription
StepDescription comes with no property, you can pass text as children.
### 🔹 useStepper
Hook to handle the state of stepper easily, you could write your own logic to handle the state.
To work properly you need to provide two arguments to useStepper:
- **Number of current step**: starts from 0;
- **Number of total steps**.
useStepper provides several utilities:
- **step**: state to track the current step;
- **incrementStep**: function to increment state by one;
- **decrementStep**: function to decrement state by one;
- **goToStep**: function to set state to a specific step number.
## 🎨 Theming and Style Overrides
You can customize the appearance of the stepper in two ways:
### 🔹 Using the **theme** object:
```js
{
light: {
step: {
pending: {
background: "#ededed",
color: "#a1a3a7",
},
progress: {
background: "#3c3fed",
color: "#ffffff",
},
completed: {
background: "#23c275",
color: "#ffffff",
},
},
content: {
pending: {
stepNumber: { color: "#a1a3a7" },
title: { color: "#a1a3a7" },
status: { background: "#f2f2f2", color: "#a1a3a7" },
description: { color: "#a1a3a7" },
},
progress: {
stepNumber: { color: "#131b26" },
title: { color: "#131b26" },
status: { background: "#e7e9fd", color: "#3c3fed" },
description: { color: "#131b26" },
},
completed: {
stepNumber: { color: "#131b26" },
title: { color: "#131b26" },
status: { background: "#e9faf2", color: "#23c275" },
description: { color: "#131b26" },
},
},
progressBar: {
pending: {
background: "#ededed",
},
progress: {
background: "#e7e9fd",
fill: "#3c3fed",
},
completed: {
background: "#e9faf2",
fill: "#23c275",
},
},
},
dark: {
step: {
pending: {
background: "#1a1a1a",
color: "#767676",
},
progress: {
background: "#19b6fe",
color: "#ffffff",
},
completed: {
background: "#23c275",
color: "#ffffff",
},
},
content: {
pending: {
stepNumber: { color: "#767676" },
title: { color: "#767676" },
status: { background: "#1a1a1a", color: "#767676" },
description: { color: "#767676" },
},
progress: {
stepNumber: { color: "#ece4d9" },
title: { color: "#ece4d9" },
status: { background: "#08374c", color: "#19b6fe" },
description: { color: "#ece4d9" },
},
completed: {
stepNumber: { color: "#ece4d9" },
title: { color: "#ece4d9" },
status: { background: "#0b3a23", color: "#23c275" },
description: { color: "#ece4d9" },
},
},
progressBar: {
pending: {
background: "#1a1a1a",
},
progress: {
background: "#08374c",
fill: "#19b6fe",
},
completed: {
background: "#0b3a23",
fill: "#23c275",
},
},
},
}
````
### 🔹 Overriding the **CSS** using class names, example:
```css
.step {
width: 3em;
height: 3em;
}
.step.progress {
background: #6ab04c;
}
```
## ✏️ License and Credits
**React Progress Stepper** is released under the *MIT* license, feel free to use it, share and modify.