awesome-steps [![npm][npm-image]][npm-url] [![JavaScript Style Guide][js-style-image]][js-style-url]

> The most advanced yet awesome React steps component

!Alt Text

Based on [rc-steps]

Features

- Horizontal and vertical direction.
- Horizontal and vertical label placement .
- Step with icon, status, number, title, upperTitle and/or description.
- Settable current and secondaryCurrent (upper title) active step.

[npm-image]: https://img.shields.io/npm/v/npm.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/awesome-steps
[js-style-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg
[js-style-url]: https://standardjs.com
[download-url]: https://npmjs.org/package/awesome-steps
[rc-steps]: https://github.com/react-component/steps

Example

Online example: https://mudafar.github.io/awesome-steps/

Installation

``bash
yarn add awesome-steps
`

or

`bash
npm install --save awesome-steps
`





Usage

$3

`jsx
import React, {Component} from 'react'

import Steps from 'awesome-steps'
import 'awesome-steps/dist/style.css'

export default class App extends Component {

render() {
return (





)
}
}
`

$3

`jsx
import React, {Component} from 'react'

import Steps from 'awesome-steps'
import 'awesome-steps/dist/style.css'

export default class App extends Component {

constructor(props) {
super(props);

this.state = {current: 0};
}


render() {
return (
labelPlacement={"horizontal"}
direction={"horizontal"}
>
onClick={() => this.handleStepClick(0)}
/>
onClick={() => this.handleStepClick(1)}
/>
onClick={() => this.handleStepClick(1.01)}
subStep
/>
onClick={() => this.handleStepClick(2)}
/>

)
}


handleStepClick = (stepNumber) => {
this.setState({current: stepNumber})
};

}
`

API

$3

Name	Type	Default	Description
direction	string	horizontal	Direction of Steps, enum: horizontal or vertical.
current	number	0	Index of current step (integer value). For subStep increment the index by 0.01 (see the advanced usage).
secondaryCurrent	number	0	Index of secondary current step (upper title).
size	string		Size of Steps, could be small.
labelPlacement	string		Placement of step title, could be vertical.
status	string	wait	Status of current Steps, could be error process finish wait.

$3

Name	Type	Default	Description
title	ReactNode		Title of step item.
upperTitle	ReactNode		Upper title of step item.
description	ReactNode		Description of step item.
icon	ReactNode		Set icon of step item.
status	string		Status of current Steps, could be error process finish wait.
subStep	Bool	false	Set as sub-step, this will make the step smaller, also remove the number.

Style

$3

- : rc-steps rc-steps-[direction] rc-steps-label-[direction]
- : rc-steps-item rc-steps-item-[status] [rc-steps-item-secondary-current] [rc-steps-item-sub-step]
* rc-steps-item-tail
* rc-steps-item-icon
* rc-steps-item-content
* rc-steps-item-upper-content

[direction] and [status] use the same values from the API.

Development

`bash


download the source code

git clone https://github.com/mudafar/awesome-steps.git
cd awesome-steps

install needed dependencies

npm install

start rollup in watch mode

npm start
`
Open another terminal to run example:
`bash
cd example/

install example's needed dependencies

npm install

use react-scripts to start a local server

npm start
``

License

MIT © Mudafar