react-stepper-component

stepper component for react.js

Installation

npm install react-stepper-component --save

Usage

import Stepper from 'react-stepper-component';

// ...
handlerStepperClick(id){
    //id from Stepper.Content props 'id;
    console.log(id)

}

render() {
  return (
    <Stepper onClick={this.handlerStepperClick}>
        <Stepper.Content id="1" >
            <Stepper.Title>
                1
            </Stepper.Title>
            <Stepper.Detail>
                <Stepper.TitleHeadline >
                   Step One
                </Stepper.TitleHeadline>
                <Stepper.Description>
                    Description of step one
                </Stepper.Description>
            </Stepper.Detail>
        </Stepper.Content>
        <Stepper.Content id="2" active >
            <Stepper.Title>
                2
            </Stepper.Title>
            <Stepper.Detail>
                <Stepper.TitleHeadline>
                    Step Two
                </Stepper.TitleHeadline>
                <Stepper.Description>
                    Description of step Two
                </Stepper.Description>
            </Stepper.Detail>
        </Stepper.Content>

        <Stepper.Content  disabled>
            <Stepper.Title>
                3
            </Stepper.Title>
            <Stepper.Detail>
                <Stepper.TitleHeadline>
                     Step Three
                </Stepper.TitleHeadline>
                <Stepper.Description>
                     Description of step three
                </Stepper.Description>
            </Stepper.Detail>

        </Stepper.Content>
    </Stepper>
  );
}

Props

| Property | Type | isRequired? | Default | Description | | --- | :---: | :---: | :---: | --- | | OnClick | func | required | - | Callback when content onClick | | id | string | optional | undefined | indicator from container | | disabled | bool | optional | false | disabled item stepper| | active | bool | optional | false | indicator active of item stepper |

License

MIT