Package Exports

react-stepper-classic
react-stepper-classic/lib/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 (react-stepper-classic) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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