Stepper-React

Stepper-React is a flexible, customizable step progress indicator for your React applications. It's designed to be easy to use and integrate into your projects, with a clean and modern design.

Features

• Fully customizable steps
• Responsive design
• Easy to integrate
• Supports both TypeScript and JavaScript
• Lightweight: The package is designed to be lightweight and efficient, ensuring it doesn't add unnecessary bloat to your project.

Installation

You can install Stepper-React using npm:

npm install stepper-react

Usage

Here's a basic example of how to use Stepper-React:

import Stepper from 'stepper-react';

const steps = [
  {topLabel: 'Step 1', bottomLabel: 'Start', content: 'This is the first step.'},
  {topLabel: 'Step 2', bottomLabel: 'Process', content: 'This is the second step.'},
  {topLabel: 'Step 3', bottomLabel: 'Finish', content: 'This is the final step.'},
];

function App() {
  return <Stepper steps={steps} />;
}

Stepper Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | activeStep | number | 1 | The current active step. | | steps | array of Step objects | [] | The steps for the stepper. Each step is an object with topLabel, bottomLabel, and content properties. | | containerWidth | number | 7 | The width of the container. | | heightforMobileStepper | string | "5rem" | The height for the stepper in mobile view. | | topLabelFontSize | string | "0.7rem" | The font size of the top label. | | bottomLabelFontSize | string | "0.7rem" | The font size of the bottom label. | | contentFontSize | string | "0.7rem" | The font size of the content. | | topLabelFontColor | string | "rgb(114, 114, 114)" | The color of the top label. | | bottomLabelFontColor | string | "rgb(114, 114, 114)" | The color of the bottom label. | | contentFontColor | string | "rgb(114, 114, 114)" | The color of the content. | | stepperWrapperBackgroundColor | string | "rgb(255, 255, 255)" | The background color of the stepper wrapper. | | stepperContentWrapperBackgroundColor | string | "rgb(255, 255, 255)" | The background color of the stepper content wrapper. |

Each Step object in the steps array has the following properties: | Property | Type | Description | | --- | --- | --- | | topLabel | string | The top label for the step. | | bottomLabel | string | The bottom label for the step. | | content | ReactNode | The content for the step. |

Contributing

We welcome contributions!

License

Stepper-React is MIT licensed.