1.0.4 • Published 5 years ago

react-simple-stepper-component v1.0.4

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

react-simple-stepper-component

Well-designed stepper component for react

Installation

npm install react-simple-stepper-component --save

Then just add import Stepper from 'react-simple-stepper-component'; 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
activeBorderColorColor of border surrounding active circlestring
activeBorderStyleStyle of border surrounding active circlesolidstring
activeColorActive circle color#5096FFstring
activeOpacityActive circle opacity1string
activeStepActive step index, starts at 00number
activeTitleColorActive title color#000string
activeTitleOpacityActive title opacity1string
barStyleStyle of bar separating stepssolidstring
circleFontColorCircle text color (for index)#FFFstring
circleFontSizeCircle text size16number
circleTopTop margin of Stepper component24number
completeBarColorColor of bar connected to a completed step#E0E0E0string
completeBorderColorColor of border surrounding completed circlestring
completeBorderStyleStyle of border surrounding completed circlesolidstring
completeColorCompleted circle color#5096FFstring
completeOpacityCompleted circle opacity1string
completeTitleColorCompleted title color#000string
completeTitleOpacityCompleted title opacity1string
defaultBarColorDefault color of bar separating circles#E0E0E0string
defaultBorderColorDefault color of border surrounding circlestring
defaultBorderStyleDefault style of border surrounding circlesolidstring
defaultBorderWidthDefault Border Width3number
defaultColorDefault circle color - not active or completed#E0E0E0string
defaultOpacityDefault circle opacity1string
defaultTitleColorDefault title color - not active or completed#757575string
defaultTitleOpacityDefault title opacity1string
hasLabelConditionally render step numbertruebool
leftBarOffsetLeft bar offset50%string
lineHeightline height (Thickness of the line between the steps)number
lineMarginOffsetOffset for line margin4number
rightBarOffsetRight bar offset50%string
sizeCircle size32number
stepsList of step objects (see below)array
titleFontSizeTitle text size16number
titleTopSpace between circle and title8number

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

Original Package

react-stepper-horizontal

Original Author

InJung Chung / @mu29

License

MIT

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago