react-stepper-horizontal

    1.0.11 • Public • Published

    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

    Install

    npm i react-stepper-horizontal

    DownloadsWeekly Downloads

    7,250

    Version

    1.0.11

    License

    MIT

    Unpacked Size

    99.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • mu29