1.0.11 • Published 6 years ago

react-stepper-horizontal v1.0.11

Weekly downloads
6,275
License
MIT
Repository
github
Last release
6 years ago

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

namedescriptiondefaulttype
activeStepActive step index, starts at 00number
stepsList of step objects (see below)array
activeColorActive circle color#5096FFstring
completeColorCompleted circle color#5096FFstring
defaultColorDefault circle color - not active or completed#E0E0E0string
activeTitleColorActive title color#000string
completeTitleColorCompleted title color#000string
defaultTitleColorDefault title color - not active or completed#757575string
circleFontColorCircle text color (for index)#FFFstring
sizeCircle size32number
circleFontSizeCircle text size16number
titleFontSizeTitle text size16number
circleTopTop margin of Stepper component24number
titleTopSpace between circle and title8number
defaultOpacityDefault circle opacity1string
completeOpacityCompleted circle opacity1string
activeOpacityActive circle opacity1string
defaultTitleOpacityDefault title opacity1string
completeTitleOpacityCompleted title opacity1string
activeTitleOpacityActive title opacity1string
barStyleStyle of bar separating stepssolidstring
defaultBorderColorDefault color of border surrounding circlestring
completeBorderColorColor of border surrounding completed circlestring
activeBorderColorColor of border surrounding active circlestring
defaultBorderStyleDefault style of border surrounding circlesolidstring
completeBorderStyleStyle of border surrounding completed circlesolidstring
activeBorderStyleStyle of border surrounding active circlesolidstring
defaultBarColorDefault color of bar separating circles#E0E0E0string
completeBarColorColor of bar connected to a completed step#E0E0E0string
lineMarginOffsetOffset for line margin4number
defaultBorderWidthDefault Border Width3number

Step Objects

namedescriptiondefaulttype
titleDisplayed text of the step below the numberundefinedstring
iconDisplayed icon of the stepundefinedimage/object
hrefLink to send them to on clickundefinedstring
onClickEvent handler for when the step is clickedundefinedfunction

Author

InJung Chung / @mu29

License

MIT