stepper-react
TypeScript icon, indicating that this package has built-in type declarations

0.0.9 • Public • Published

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.

Package Sidebar

Install

npm i stepper-react

Weekly Downloads

8

Version

0.0.9

License

MIT

Unpacked Size

41.4 kB

Total Files

9

Last publish

Collaborators

  • nishant-argade