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

| Prop Name | Type | Default Value | Description | | ---------------------- | ------ | ------------- | ------------------------------------------------------------------------ | | width | number | | The width of the step as a percentage of the total width of the stepper. | | activeColor | string | '#5096FF' | The background color of the active step. | | completeColor | string | '#5096FF' | The background color of the completed steps. | | defaultColor | string | '#E0E0E0' | The background color of the inactive steps. | | activeTitleColor | string | '#000' | The text color of the active step title. | | completeTitleColor | string | '#000' | The text color of the completed step titles. | | defaultTitleColor | string | '#757575' | The text color of the inactive step titles. | | circleFontColor | string | '#FFF' | The font color of the step index or icon. | | size | number | 32 | The size of the step circle. | | circleFontSize | number | 16 | The font size of the step index or icon. | | titleFontSize | number | 16 | The font size of the step title. | | circleTop | number | 24 | The top margin for the step circle. | | titleTop | number | 8 | The top margin for the step title. | | title | string | | The title of the step. | | index | number | | The index of the step. | | active | bool | false | Indicates if the step is active. | | completed | bool | false | Indicates if the step is completed. | | first | bool | false | Indicates if the step is the first step. | | isLast | bool | false | Indicates if the step is the last step. | | completeOpacity | string | | The opacity of the completed step. | | activeOpacity | string | | The opacity of the active step. | | defaultOpacity | string | | The opacity of the inactive step. | | completeTitleOpacity | string | | The opacity of the completed step title. | | activeTitleOpacity | string | | The opacity of the active step title. | | defaultTitleOpacity | string | | The opacity of the inactive step title. | | barStyle | string | 'solid' | The style of the connecting bar. | | defaultBarColor | string | '#E0E0E0' | The color of the inactive connecting bar. | | completeBarColor | string | | The color of the completed connecting bar. | | defaultBorderColor | string | | The border color of the inactive step circle. | | completeBorderColor | string | | The border color of the completed step circle. | | activeBorderColor | string | | The border color of the active step circle. | | defaultBorderStyle | string | 'solid' | The border style of the inactive step circle. | | completeBorderStyle | string | | The border style of the completed step circle. | | activeBorderStyle | string | | The border style of the active step circle. | | lineMarginOffset | number | 4 | The margin offset for the connecting lines. | | defaultBorderWidth | number | 3 | The border width of the step circle. | | href | string | | The URL to navigate to when the step is clicked. | | onClick | func | | The function to call when the step is clicked. | | customStyles | object | {} | Custom styles to apply to various parts of the step. |

Stepper Component

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

Props

| Prop Name | Type | Default Value | Description | | --------------- | ----------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------- | | activeStep | number | 0 | The index of the currently active step. | | steps | arrayOf | | An array of step objects. Each step object should contain title, icon, href, onClick, and optional customStyles. | | | shape({ | | | | | title: | | | | | icon: | | | | | href: | | | | | onClick: | | | | | customStyles: object }) | | | | disabledSteps | arrayOf | [] | An array of indices representing steps that are disabled. | | customStyles | object | {} | Custom styles to apply to the stepper container and the stepper. |

Step Objects

| name | description | default | type | | ------- | ------------------------------------------- | --------- | ------------ | | title | Displayed text of the step below the number | undefined | string | | icon | Displayed icon of the step | undefined | image/object | | href | Link to send them to on click | undefined | string | | onClick | Event handler for when the step is clicked | undefined | function |

Author

Sadequl Islam / @sadequlfakir

License

MIT