/react-stepper

Well-designed stepper component for react

Primary LanguageJavaScriptMIT LicenseMIT

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