React Vertical Steps List

English｜繁體中文

DEMO

Install

$ npm i react-vertical-steps-list

Import

import { VerticalStepsList, VSL_STATUS } from 'react-vertical-steps-list'

Example

jsx:

  <VerticalStepsList items={items} />

items:

const items = [{
  text: 'Progress 1',
  status: VSL_STATUS.DONE,
  time: '12:00'
}, {
  text: 'Progress 2',
  time: '12:30',
  status: VSL_STATUS.DONE,
  children: [{
    text: 'Children 1'
  }, {
    text: 'Children 2'
  }]
}, {
  text: 'Progress 3',
  status: VSL_STATUS.PENDING,
  callback () {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(true)
      }, 1000)
    })
  }
}, {
  text: 'Progress 4',
  status: VSL_STATUS.COMING
}, {
  text: 'Progress 5',
  status: VSL_STATUS.COMING,
  callback () {
    return new Promise(resolve => {
      setTimeout(() => {
        alert('checked error.')
        resolve(false)
      }, 1000)
    })
  }
}]

Advanced Example

jsx:

const itemFilterHandler = item => {
  if (item.text === 'Progress 1') {
    item.text = 'Filtered Progress 1'
    item.marker = <Marker />
  }

  return item
}

<VerticalStepsList
  items={items}
  textFilter={text => text + '!'}
  childFilter={text => `Filtered ${text}`}
  itemFilter={itemFilterHandler}
/>

items:

const items = [{
  text: 'Progress 1',
  status: VSL_STATUS.DONE,
  time: '12:00',
  meta () {
    return this.time
  }
}, {
  text: 'Progress 2',
  time: '12:30',
  status: VSL_STATUS.DONE,
  children: [{
    text: 'Children 1'
  }, {
    text: 'Children 2'
  }],
  meta () {
    return this.children.length
  }
}, {
  text: 'Progress 3',
  status: VSL_STATUS.PENDING,
  callback () {
    return save().then(res => {
      this.time = res.time
    })
  },
  update () {
    this.children = [{
      text: 'New Children'
    }]
    this.text = 'Progress3 Done!'
    return this
  },
  meta () {
    return this.time
  }
}, {
  text: 'Progress 4',
  status: VSL_STATUS.COMING,
  marker: <Marker />,
  checkbox: <Checkbox />
}, {
  text: 'Progress 5',
  status: VSL_STATUS.COMING,
  callback () {
    return error().catch(err => {
      console.error(err)
      alert('checked error.')
      return false
    })
  }
}]

Run example

$ git clone https://github.com/LaiJunBin/react-vertical-steps-list.git
$ cd react-vertical-steps-list
$ npm i
$ npm run start

The server will run at http://localhost:3000

Docs

VSL_Status:

Value	Description
Done	step is done.
Pending	step waiting for user to click.
Coming	step coming soon.

VerticalStepsList:

Attribute	Description
items	data to generate steps list.
textFilter	Filter function for text of all items.
childFilter	Filter function for text of children in all item
itemFilter	Filter function for all item.
itemClass	set class for all item.
itemStyle	set style for all item.
childrenClass	set class for children of all item.
childrenStyle	set style for children of all item.
darkTheme	set true for dark theme.
lineColor	set color of line.
hideLastLine	set true to hide last children line.
defaultMarkerColor	set color of default marker.
defaultCheckboxColor	set color of default checkbox.
metaStyle	set style for meta.
textStyle	set style for text.
childStyle	set style for child.
lineGap	set gap for line.
lineLength	add length for line.
childrenParentStyle	set parent style of child.

items: an Array, item like below:

{
  text: '',       // required
  status: {status in VSL_STATUS},  // required
  children: [{              // optional
    text: ''
  }],
  marker: <YourMarkerComponent />,       // optional
  checkbox: <YourCheckboxComponent />,   // optional
  callback() {              // optional

  },
  update() {                // optional

  },
  meta() {                  // optional

  },
  // ... more custom data.
}

Function description

Function	Description
callback	Triggered when user click, if you return false, the step won't go to next stage.
update	Triggered when the step goes to next stage, you can update item data in this funciton.
meta	Set text in the right side.