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

Main Component

| name | description | default | type | |----------|----------------|--------------|--------| |activeStep|Active step index, starts at 0|0|number| |steps|List of step objects (see below)||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| |lineMarginOffset|Offset for line margin|4|number| |defaultBorderWidth|Default Border Width|3|number|

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

InJung Chung / @mu29

License

MIT