Package Exports

stepper-react
stepper-react/dist/index.esm.js
stepper-react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (stepper-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

Contributing

We welcome contributions!

License

Stepper-React is MIT licensed.