# react-js-stepper
[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![npm download][download-image]][download-url]

Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation

# React Stepper Demo
https://pkbadiger.github.io/react-js-stepper/ 

## Installation

The package can be installed via NPM:

```
npm install react-js-stepper --save
```
You will need to install and configure sass-loader withing webpack.config.js, since all the styles required for react-js-stepper component is written using css preprocessor "SASS".

## Usage

The most basic use of the react-js-stepper can be described with:

```
import React from 'react';
import ReactDOM from 'react-dom';
import Stepper from 'react-js-stepper'

const steps = [{title: 'Stage - 1'}, {title: 'Stage - 2'}, {title: 'Stage - 3'},]

export default class App extends React.Component{
    constructor(props) {
        super(props);

        this.state = {
            activeStep: 1,
        }
    }

    handleOnClickStepper = (step) => {
        this.setState({activeStep: step});
    }

    handleOnClickNext = () => {
        let nextStep = this.state.activeStep + 1;
        this.setState({activeStep: nextStep})
    }

    handleOnClickBack = () => {
        let prevStep = this.state.activeStep - 1;
        this.setState({activeStep:prevStep})
    }

    render(){
        return(
            <React.Fragment>
                <Stepper 
                    steps={steps} 
                    activeStep={this.state.activeStep}
                    onSelect={this.handleOnClickStepper}
                    showNumber={false} 
                />

                <div style={{marginTop: '40px'}}>
                {this.state.activeStep === 1 ? <div> You are in Stage {this.state.activeStep} </div> : 
                 this.state.activeStep === 2 ? <div> You are in Stage {this.state.activeStep} </div> :
                 <div> You are in Stage {this.state.activeStep} </div>
                }
                </div>

                <div style={{marginTop: '40px'}}>
                    <input type="button" value={this.state.activeStep === steps.length ? 'Finish' : 'Next'} 
                            onClick={this.state.activeStep === steps.length ? null : this.handleOnClickNext}/>
                    {this.state.activeStep ===1 ? '' : <input type="button" value="Back" onClick={this.handleOnClickBack} /> }
                </div>
            </React.Fragment>
        )
    }
}
```

## Configuration

The most basic use of the react-js-stepper can be described with:
```
    <Stepper 
        steps={steps} 
        activeStep={this.state.activeStep}
        onSelect={this.handleOnClickStepper}
        showNumber={false} 
    />
```

`steps` array of objects with property name called `title` passed to stepper to display number of steps or stages.

`activeStep` is a number passed to stepper to highlight or show active step among list of steps.

`onSelect` You can use onSelect event handler which fires each time when you click on each step.

`showNumber` is a boolean, this is to enable/disable step number within circle.


## Props

| Name     | Type           | Default     | Description  |
|----------|----------------|-------------|--------------|
| steps| array of objects | steps = [{title: 'Stage - 1'}, {title: 'Stage - 2'}, {title: 'Stage - 3'},] | Constants passed to display stepper|
|activeStep | number | 2 |  |
| onSelect | func | | callback fired when select stepper |
|showNumber| boolean | false | To enable/disable step/stage number within circle