Stepper-react NPM

Stepper-React

version GitHub Workflow Status (branch) David David License Downloads

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.

stepper-react

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. |