react-stepper-horizontal

react-stepper

Well-designed stepper component for react

Installation

npm install react-stepper-horizontal --save

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

Screenshot

Usage

render() {
  return (
    <div>
      <Stepper steps={ [{title: 'Step One'}, {title: 'Step Two'}, {title: 'Step Three'}, {title: 'Step Four'}] } activeStep={ 1 } />
    </div>
  );
}

See full example here

API

name	description	default	type
activeStep	Active step index, starts at 0	0	number
steps	List of steps, must be string array		array
activeColor	Active circle color	#5096FF	string
completeColor	Completed circle color	#5096FF	string
defaultColor	Default circle color - not active or completed	#E0E0E0	string
activeTitleColor	Active title color	#000	string
completeTitleColor	Completed title color	#000	string
defaultTitleColor	Default title color - not active or completed	#757575	string
circleFontColor	Circle text color (for index)	#FFF	string
size	Circle size	32	number
circleFontSize	Circle text size	16	number
titleFontSize	Title text size	16	number
circleTop	Top margin of Stepper component	24	number
titleTop	Space between circle and title	8	number
defaultOpacity	Default circle opacity	1	string
completeOpacity	Completed circle opacity	1	string
activeOpacity	Active circle opacity	1	string
defaultTitleOpacity	Default title opacity	1	string
completeTitleOpacity	Completed title opacity	1	string
activeTitleOpacity	Active title opacity	1	string
barStyle	Style of bar separating steps	solid	string
defaultBorderColor	Default color of border surrounding circle		string
completeBorderColor	Color of border surrounding completed circle		string
activeBorderColor	Color of border surrounding active circle		string
defaultBorderStyle	Default style of border surrounding circle	solid	string
completeBorderStyle	Style of border surrounding completed circle	solid	string
activeBorderStyle	Style of border surrounding active circle	solid	string
defaultBarColor	Default color of bar separating circles	#E0E0E0	string
completeBarColor	Color of bar connected to a completed step	#E0E0E0	string

Author

InJung Chung / @mu29

License

MIT