Stepper Component

Overview

Demo Link: form-stepper-react

The Stepper component is a customizable, responsive stepper UI component built with React. It allows you to display a series of steps in a visual format, where each step can have a title, description, and custom colors. The steps are clickable, triggering a customizable event on click.

Installation

To install the Stepper component, run:

Usage

Basic Usage

npm install form-stepper-react

import React from 'react';
import Stepper from 'form-stepper-react';

function App() {
  const steps = [
    {
      title: 'Step 1',
      info: 'This is the first step',
      stepBackgroundColor: '#f0f0f0',
      titleColor: '#000',
      infoColor: '#666',
    },
    // Add more steps as needed
  ];

  function handleStepClick(e) {
    console.log('Step was clicked!', e);
  }

  return (
    <Stepper
      steps={steps}
      onStepClick={handleStepClick}
      defaultTheme="light"
      stepBackgroundColor="#000"
      titleColor="#fff"
      infoColor="#fff"
      titleVisibleLength={15}
      infoVisibleLength={22}
      titleEndDelimiter="..."
      infoEndDelimiter="---"
    />
  );
}

export default App;

• Import the Stepper component into your React application.
• Define the steps as an array of objects. Each step can include a title, description (info), and custom colors for the background, title, and description.
• Add the Stepper component to your JSX, passing in the steps and other optional props.
• Handle step click events using the onStepClick prop.

Customization

• Steps: Each step can be customized with its own background color, title color, and description color.
• Themes: You can specify a light or dark theme using the defaultTheme prop.
• Text Truncation: Customize how text is truncated with titleVisibleLength, infoVisibleLength, titleEndDelimiter, and infoEndDelimiter.
• Event Handling: Capture click events on each step with the onStepClick prop.

Example

Create an array of step objects, each containing a title, description, and custom colors. Then, render the Stepper component in your React app.

Props

• steps: Array of objects representing each step. Each object can include:
  • title: The title of the step.
  • info: The description of the step.
  • stepBackgroundColor: The background color of the step.
  • titleColor: The color of the step's title.
  • infoColor: The color of the step's description.
• onStepClick: Function to handle click events on steps.
• defaultTheme: Specify "light" or "dark" for the component's theme.
• titleVisibleLength: Number of characters to display in the step title before truncating.
• infoVisibleLength: Number of characters to display in the step description before truncating.
• titleEndDelimiter: String to append to truncated titles (default: ...).
• infoEndDelimiter: String to append to truncated descriptions (default: ---).

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Author

Pratik Deshpande

• Git Repository form-stepper-react