react-stepper-classic v1.0.4

react-stepper-classic

A customizable and modern stepper component for React.

Features

• Fully customizable styles
• Supports active, completed, and disabled steps
• Custom click handlers for steps
• Horizontal layout

Installation

npm install react-stepper-classic --save

yarn add react-stepper-classic --save

Then just add import Stepper from 'react-stepper-classic'; into your file.

Screenshot

Example Usage

import Stepper from 'react-stepper-classic';

const steps = [
  { title: 'Step 1', href: '#', onClick: () => console.log('Step 1 clicked') },
  { title: 'Step 2', href: '#', onClick: () => console.log('Step 2 clicked') },
  { title: 'Step 3', href: '#', onClick: () => console.log('Step 3 clicked') },
];

const App = () => {
  return (
    <Stepper
      activeStep={1}
      steps={steps}
    />
  );
};

Custom Styles Example

const customStepStyles = {
  step: { backgroundColor: 'lightblue' },
  circle: { borderColor: 'blue' },
  title: { color: 'darkblue' },
};

const steps = [
  { title: 'Step 1', customStyles: customStepStyles },
  { title: 'Step 2' },
  { title: 'Step 3' },
];

<Stepper steps={steps} customStyles={{ stepper: { backgroundColor: 'lightgray' } }} />

See full example here

API

Props

Stepper Component

The Stepper component manages and displays a series of Step components.

Props

Step Objects

Author

Sadequl Islam / @sadequlfakir

License

MIT