# react-vertical-steps-list > Generate vertical progress list with ease. Latest version **0.1.22** (published 2022-03-06) · MIT license · 0 weekly downloads ## Install ```sh npm install react-vertical-steps-list pnpm add react-vertical-steps-list yarn add react-vertical-steps-list bun add react-vertical-steps-list ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.22 | | Published | 2022-03-06 | | First published | 2021-11-10 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 24.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | Lai JunBin | | Maintainers | laijunbin | ## Links - npm: https://www.npmjs.com/package/react-vertical-steps-list - Repository: https://github.com/laijunbin/react-vertical-steps-list - Homepage: https://github.com/laijunbin/react-vertical-steps-list#readme - Issues: https://github.com/laijunbin/react-vertical-steps-list/issues - npm.io page: https://npm.io/package/react-vertical-steps-list ## Dependencies (2) - [immer](https://npm.io/package/immer.md) ^9.0.6 - [classnames](https://npm.io/package/classnames.md) ^2.3.1 ## Recent versions - 0.1.22 (latest) — 2022-03-06 - 0.1.21 — 2022-01-21 - 0.1.20 — 2022-01-21 - 0.1.19 — 2022-01-21 - 0.1.18 — 2022-01-19 - 0.1.17 — 2022-01-16 - 0.1.16 — 2022-01-12 - 0.1.15 — 2022-01-11 - 0.1.14 — 2022-01-10 - 0.1.13 — 2022-01-08 - 0.1.12 — 2021-11-22 - 0.1.11 — 2021-11-12 - 0.1.10 — 2021-11-12 - 0.1.9 — 2021-11-12 - 0.1.8 — 2021-11-12 - … 8 more at https://npm.io/package/react-vertical-steps-list/versions ## README # React Vertical Steps List English｜[繁體中文](https://github.com/LaiJunBin/react-vertical-steps-list/blob/main/README-zh-tw.md#react-vertical-steps-list) [DEMO](https://laijunbin.github.io/react-vertical-steps-list/index.html) ![demo.png](./demo.png) # Install ``` $ npm i react-vertical-steps-list ``` # Import ```js import { VerticalStepsList, VSL_STATUS } from 'react-vertical-steps-list' ``` ## Example jsx: ```jsx ``` items: ```js 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: ```jsx const itemFilterHandler = item => { if (item.text === 'Progress 1') { item.text = 'Filtered Progress 1' item.marker = } return item } text + '!'} childFilter={text => `Filtered ${text}`} itemFilter={itemFilterHandler} /> ``` items: ```js 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: , 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: ```js { text: '', // required status: {status in VSL_STATUS}, // required children: [{ // optional text: '' }], marker: , // optional checkbox: , // 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. | --- _Source: https://npm.io/package/react-vertical-steps-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._