Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/keyvaluesoftwaresystems/react-stepper
A fully customizable ready to use vertical and horizontal stepper UI package.
https://github.com/keyvaluesoftwaresystems/react-stepper
progress-ui react stepper steps steps-ui typescript vertical-stepper webpack workflow-stepper
Last synced: 3 months ago
JSON representation
A fully customizable ready to use vertical and horizontal stepper UI package.
- Host: GitHub
- URL: https://github.com/keyvaluesoftwaresystems/react-stepper
- Owner: KeyValueSoftwareSystems
- License: mit
- Created: 2023-02-23T09:49:01.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-28T21:07:59.000Z (10 months ago)
- Last Synced: 2024-11-03T13:02:55.470Z (3 months ago)
- Topics: progress-ui, react, stepper, steps, steps-ui, typescript, vertical-stepper, webpack, workflow-stepper
- Language: TypeScript
- Homepage:
- Size: 3.07 MB
- Stars: 17
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React Stepper
A fully customizable ready to use stepper UI package for React.
Try tweaking a stepper using this codesandbox link here
## Installation
The easiest way to use react-stepper-ui-component is to install it from npm and build it into your app with Webpack.
```bash
npm install @keyvaluesystems/react-stepper
```
You’ll need to install React separately since it isn't included in the package.
Note for **Next.js** users, if you are using Next.js version 13 or later, you will have to use the `use client` feature to ensure proper compatibility.
## Usage
React Stepper can run in a very basic mode by just providing the `steps` and `currentStepIndex` props like this:
```jsx
```
The `steps` array is an array of objects with following keys:
- `stepLabel` - A mandatory string representing the label/title of the step.
- `stepDescription` - Optional extra information or description for the step.
- `completed` - Boolean flag for indicating step completion status.
You can customize each step node with your own DOM element using the `renderNode` prop
```jsx
{step.stepLabel}}
/>
```
The `step` param provided by the `renderNode` callback is the same object you pass as array item in `steps` prop.
## Props
Props that can be passed to the component are listed below:
Prop
Description
Default
steps: object[]
An array of step objects to render.
undefined
currentStepIndex: number
The index of current active step.
0
onStepClick?: (step: object, stepIndex: number): void
A step click handler that fires each time you click on a step.
undefined
renderNode?: (step: object, stepIndex: number): ReactElement
A render function to customize each step node with your own element.
undefined
orientation?: 'horizontal' | 'vertical'
Determines the layout of the stepper.
vertical
labelPosition?: 'left' | 'right' | 'top' | 'bottom'
Allows you to align step label and description with respect to its node
right
showDescriptionsForAllSteps boolean
A boolean prop specifying whether to show descriptions for all steps within the stepper.
false
stepContent(step: object, stepIndex: number): ReactElement
Prop that allows for dynamic content display when the step is active
undefined
styles?: object
Provides you with a bunch of callback functions to override the default styles.
undefined
## Style Customizations
All the default styles provided by this package can be overridden using the `styles` prop
Below code shows how to override the default styles of completed steps, connector lines and current active step
```jsx
import React from "react";
import Stepper from "react-stepper";
function App() {
const styles = {
LineSeparator: () => ({
backgroundColor: "#028A0F",
}),
ActiveNode: () => ({
backgroundColor: "#028A0F",
}),
CompletedNode: () => ({
backgroundColor: "#028A0F",
};
return (
);
}
export default App;
```
Additional customizations can be made by overriding the customizable styles listed below:
```jsx
const stylesOverride = {
LabelTitle: (step, stepIndex) => ({ ...styles }),
ActiveLabelTitle: (step, stepIndex) => ({ ...styles }),
LabelDescription: (step, stepIndex) => ({ ...styles }),
ActiveLabelDescription: (step, stepIndex) => ({ ...styles }),
LineSeparator: (step, stepIndex) => ({ ...styles }),
InactiveLineSeparator: (step, stepIndex) => ({ ...styles }),
Node: (step, stepIndex) => ({ ...styles }),
ActiveNode: (step, stepIndex) => ({ ...styles }),
InActiveNode: (step, stepIndex) => ({ ...styles }),
};
```
- `LabelTitle` - overrides the step label style
- `ActiveLabelTitle` - overrides the step label style of current active step
- `LabelDescription` - overrides the step description style
- `ActiveLabelDescription` - overrides the step description style of current active step
- `LineSeparator` - overrides default completed step connector line styles
- `InactiveLineSeparator` - overrides styles of step connector line after current active step
- `Node` - overrides default styles of step indicator
- `ActiveNode` - overrides default styles of step indicator of current active step
- `InActiveNode` - overrides default styles of step indicator that is not completed and not active
- `CompletedNode` - overrides default styles of completed step indicator